Skip to main content

Getting Started

Let's build an app with ditto in 5 minutes.

Create your app​

To start, go to the Ditto Creation Suite and select the '+' button in the bottom right corner.

App editor​

You'll be taken to the main app editor page. From here you can build and test your ditto app.

inline-image

There are three main sections to the app editor.

  • On the left you have the pages of your app listed (in the beginning you'll only have the homepage). Use this to move between pages and add new ones.
  • In the center you have the page document editor where you can add content and logic to each app page.
  • On the right you have the app preview where you can see what your app looks like. Hit the play button at any time to rebuild and see your app in action.

App settings and details​

On the top left of the app editor, you'll see settings tabs for your app. These allow you to update basic characteristics of your app like the title, description, and theme.

Lets go ahead and update the theme of your app:

Define your homepage​

Each app contains a homepage which cannot be deleted. This is the entry point for your app and the first page users will see.

App pages are made up of blocks. You can add blocks to your pages to include content, images, logic and more.

Each block will show up in your app as a separate element. You can add, remove, and rearrange blocks to create your app.

Clear the default homepage content​

Drag your mouse over the default homepage content and hit the delete key on your keyboard to remove it. This will give you a clean slate to start building your app. You'll notice the app preview on the right will hide as your app content has changed. We'll rebuild it after adding new content.

Add your own content​

Click the '+' button when hovering over the page to add new blocks to the homepage.

Get started by adding a heading and text block to your homepage.

Preview your app​

Once you're happy with your homepage content, click the play button in the top right corner to preview your new app.

Publish your app​

Once you're set on your app's theme and content, click the 'Finish' button in the top right corner of the app editor.

You'll be taken back to the App's preview page where you can see what your published app looks like.

Here you can also give your app a unique url handle in the top left of the page.

Next, select the 'Share' button to get a live link to your app which can be shared with others. Share this out with anyone you want to see your app.

And that's it, you've now build your first app with ditto. 🎉