Table of Contents
- Build New Template
- Template Browser
- Add Template from GitHub
- Built-in Templates
Build New Template
You can create a new template using HTML, CSS, and JS. When the Planet app renders a site, the template can utilize the values provided in the context by the app. The template system is powered by Stencil, a simple yet powerful template language for Swift.
Forking from the default Plain template is an excellent starting point for building your own new template, as it includes most of the code examples you will need.
You can find all the currently installed templates in Tools -> Template Browser. If you plan to build your own template, VS Code is recommended. After installing VS Code, you can right-click on a template and select "Open in VS Code."
Add Template from GitHub
By default, all templates are stored in the following folder:
For instance, there is a new work-in-progress template on GitHub:
To add this template to the templates folder, use these commands:
cd ~/Library/Containers/xyz.planetable.Planet/Data/Documents/Planet/Templates git clone https://github.com/Planetable/SiteTemplateCroptop croptop
Once a new template has been added to the templates folder, you must restart the app for it to be recognized.
After the new template is recognized, you can find it in the Template Browser under the Tools menu, or you can choose to use it from the Edit Planet option.
These are the built-in templates in the folder:
When the app updates, it will attempt to update these templates as well. However, if a .git subfolder is detected, it indicates the folder could be part of the developer environment, and the app will not overwrite it.
Template Showcase: Plain
This is the default template. It resembles a minimalist operating system look and feel. It features both dark and light modes.
- Live Demo: planetable.eth
- Source Code: Planetable/SiteTemplatePlain
Template Showcase: Grid
If your blog consists of many photos, this is the template for you. It features both dark and light modes.
- Live Demo: yihanphotos.eth
- Source Code: Planetable/SiteTemplateGrid
Template Showcase: 8-bit
This experimental template demonstrates that complex JS and graphics are possible with Planet templates. It has a retro gaming vibe.
- Live Demo: gamedb.eth
- Source Code: Planetable/SiteTemplate8bit