Skip to main content

Your First Template

In about ten minutes you will write a template that generates an HTML card, and run it. The .CodeBaker/ folder must be at the project root (the project's base folder, not a subfolder).

1. Create the folder​

Create this structure in your project root:

.CodeBaker/
└── html-card/
    ├── codebaker.config.json5
    └── {{ title }}-card.html

Note the name of the template file, {{ title }}-card.html: {{ title }} stands for the value you type for title, so the generated file will be named after it. A placeholder works in a file name just as it does in the contents of a file.

2. Write the two files​

The example below shows the template, the values you type, and the file you get. Click a file in the tree to read it; each code block has a copy button.

An HTML card
Template.CodeBaker/html-card/
Download the template (.zip)https://codebaker.dev/examples/html-card.zip
Install in IntelliJ IDEA

Needs the CodeBaker plugin and an open project. Another IDE, or the button does nothing? Copy the link, then in the IDE right-click any folder → New → Generate from Template → Install Template from URL… and paste it. You always get a confirmation dialog before anything is installed.

codebaker.config.json5
{
  // The folder name when the template is installed under .CodeBaker/
  id: "html-card",

  name: "HTML Card",

  // Each variable becomes a field in the dialog, with this as its default value.
  vars: {
    title: "Welcome",
    description: "A beautiful card component",
  },

  // Opened in the editor after generation. The path is relative to the folder you generated into.
  open: ["{{ title }}-card.html"],
}
{{ title }}-card.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
    <style>
        .card {
            border-radius: 8px;
            padding: 20px;
            max-width: 400px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .card-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="card">
        <div class="card-title">{{ title }}</div>
        <p>{{ description }}</p>
    </div>
</body>
</html>
Typed in the dialogstep 1, Custom Properties
title
Welcome
description
A beautiful card component
Generated resultwhat lands in your project
Welcome-card.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome</title>
    <style>
        .card {
            border-radius: 8px;
            padding: 20px;
            max-width: 400px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .card-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="card">
        <div class="card-title">Welcome</div>
        <p>A beautiful card component</p>
    </div>
</body>
</html>

What the two files do:

  • codebaker.config.json5 describes the template. name is what the menu shows. Each entry of vars becomes a field in the dialog, with its value as the default (how fields are defined). open lists a file to open after generation, with its path relative to the folder you generate into. Nothing else is needed: {{ title }} is Pebble's own syntax and works in every template, in file contents and in file names.
  • {{ title }}-card.html is an ordinary HTML file with a placeholder wherever a value should change.

If your IDE objects to {{ }} in some kind of file, you can write the placeholders in another style, for example ___title___. See Choosing a placeholder style.

3. Generate​

  1. Right-click a folder in the Project view, for example components/.
  2. Choose New → Generate from Template → HTML Card. The menu is built each time it opens, so a new template shows up without restarting the IDE.
  3. Fill in the form: title = Welcome, description = A beautiful card component.
  4. Click Next >> twice to reach the preview, which shows what will be created, then Finish, then Done.

components/Welcome-card.html is created and opened, because of the open list. Open it in your browser to see the card.

4. Change it and generate again​

This is the loop you will work in. Open {{ title }}-card.html in the template and change something, for example the border-radius from 8px to 16px. Generate again with the same values.

The preview now has a file that already exists, so it shows a diff: the file you have, and what CodeBaker would write. You see exactly the line you changed, and nothing is written until you click Finish and confirm. See Step 3: Code Preview.

Next steps​