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.

Template Browser

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."

Template Browser: Open in VS Code
Tools -> Template Browser -> Open in VS Code

Add Template from GitHub

By default, all templates are stored in the following folder:

~/Library/Containers/xyz.planetable.Planet/Data/Documents/Planet/Templates

For instance, there is a new work-in-progress template on GitHub:

https://github.com/Planetable/SiteTemplateCroptop

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.

Template Browser
Tools -> Template Browser
Select Template
Edit Planet -> Select Template

Built-in Templates

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.

Template: Plain
planetable.eth with the Plain template

Template Showcase: Grid

If your blog consists of many photos, this is the template for you. It features both dark and light modes.

Template: Grid
yihanphotos.eth with the Grid template

Template Showcase: 8-bit

This experimental template demonstrates that complex JS and graphics are possible with Planet templates. It has a retro gaming vibe.

Template: 8-bit
gamedb.eth with the 8-bit template
Features Guides