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 "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
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 "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 "Project" sidebar
💡
You can open the "Project" sidebar by using the hotkeys
on Mac and for Windows
You can open the "Project" sidebar by using the hotkeys
on Mac and for Windows
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 "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.
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
💡
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.
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
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
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