Create a project

You have two options for creating a new project: 1) Click "New project" in your list of projects 2) Go to "Templates"
Once logged in you can create a new project by clicking

Once logged in you can create a new project by clicking "New project"

In either case you should now see a list of templates โ€” select a template to get started.
๐Ÿ’ก
Preview a template by clicking the โ€œPreviewโ€ button in the lower right corner of each template. Preview a template by clicking the โ€œPreviewโ€ button in the lower right corner of each template.
Once you have selected a template, you will need to assign an emoji, name and ID for your project. At the bottom of the window used for creating a new project, you will see a โ€œPreview linkโ€. At this URL you will see the live version of your app (if a custom domain is not attached, which is not yet supported).
This project is ready to be created

This project is ready to be created

Click "Create project" to create your new project.

Create a branch

To get started developing your app, you will need to create a new branch or edit the predefined "Dev" branch.
๐Ÿ’ก
A branch is a version of your project. Your app is updated by publishing branches. A branch is a version of your project. Your app is updated by publishing branches.
Your live version of your app is only updated when you publish branches. While working in a branch your progress is saved automatically.
Create a new branch by clicking

Create a new branch by clicking "New branch" within your project

You can create and delete as many branches as you like per project.
๐Ÿ’ก
Create multiple branches and publish smaller updates โ€” in this way mistakes are better avoided. Create multiple branches and publish smaller updates โ€” in this way mistakes are better avoided.

Create a page

One of the first things you probably want to create is a page. To do so โ€” open the "Project" sidebar (the box in the top left corner of the toddle editor).
See all of your project's content in the

See all of your project's content in the "Project" sidebar

๐Ÿ’ก
You can open the "Project" sidebar by using the hotkeys
โŒ˜
K
on Mac and for Windows
Ctrl
K
You can open the "Project" sidebar by using the hotkeys
โŒ˜
K
on Mac and for Windows
Ctrl
K
Click the small "+" icon next to "Pages". This will open a modal for naming your new page. Enter a name and click "Create page".
Open the

Open the "Project" sidebar to add a new page

๐Ÿ’ก
Enabling "Copy current?" in the modal for creating a new page will copy the contents of the page you are currently viewing. Enabling "Copy current?" in the modal for creating a new page will copy the contents of the page you are currently viewing.

Create a component

Creating a new component is done in the say way as creating a new page (see above). Click the "+" icon next to "Components" in the "Project" sidebar.

Preview app

You can always preview your branched version of your app by entering the "Project" sidebar and pressing "Preview". Again, this a preview of the branch you are working on โ€” not your live app.
Preview your branch

Preview your branch

Publish app

When you are ready to update your app you can publish the branch you are working on. This is done by opening the "Project" sidebar and clicking "Publish ๐Ÿšข".
Publish the changes you made in your branch to the live version of your app

Publish the changes you made in your branch to the live version of your app

๐Ÿ’ก
Your changes made in a branch will be transferred to the live version of your app once you publish the branch. Your changes made in a branch will be transferred to the live version of your app once you publish the branch.
When you have clicked "Publish ๐Ÿšข" you are transferred to an overview of all the changes you have made.

No changes made

If your did not make any changes to your branch then there is nothing to publish โ€” in that case you will encounter the screen below.
No changes has been made to this app in this branch yet

No changes has been made to this app in this branch yet

Changes made

When you have made changes to your app you can see which pages and components you have changed in the changes overview. Click the page/component to see more details (the details view is work in progress at the moment). Publish your changes by pressing the blue "Publish" button. Your changes will now be live on the main version of your app.
Publish the changes you made in your branch to the live version of your app

Publish the changes you made in your branch to the live version of your app

Merge conflicts

In some cases โ€” often when working multiple people in a project โ€” you will encounter merge conflicts between branches. This occurs when changes have been made to the same element in your app by two or more branches. Conflicts will be highlighted in the changes overview. The number in the yellow label shows changes made by a different branch than yours. The number in green shows your branch's changes.
View showing differences between branches for a given component

View showing differences between branches for a given component

In this case, you will have to decide on which changes to keep and which to discard. Discarding changes is done by clicking the page/component with the red exclamation mark. Doing so will take you to a detailed view of component changes. Click "Undo my changes" to discard the changes made for this page/component within your branch.
Undo changes made in a branch

Undo changes made in a branch