Skip to content

Documentation · Start · 2 min read

Your first app with Appsanic

Create an account, open a project and bring a first screen to life.

Create an account

Appsanic runs in your browser. Sign up with an email address and a password of at least 12 characters, then enter the code sent to your email. That is the whole setup: there is nothing to install.

The Free plan includes the visual editor, the code workspace, themes, connectors and the browser preview, with one project, 100 MB of asset storage and 5 starter templates. Sanic AI comes with the paid plans.

Open a project

Your dashboard lists your projects. Choose Create project for a blank app, which starts with one empty Home page and a neutral theme, or open Templates and start from one of the starter apps. Opening a template makes a project of your own; the template itself never changes.

A project opens in the editor with two workspaces, Design and Code, in the top bar. The rail on the left holds the tools: pages and layers, components, Sanic AI, connectors, assets and app settings. The Inspector sits on the right.

Build your first screen

Start small: a heading, a short line of text and a button. Arrange them once they are on the page.

  1. Open Components, search for Text, and add it to the Home page. Add a Button the same way.
  2. Select a component on the canvas or in Layers. The Inspector shows every property it supports, grouped and searchable.
  3. Double-click the text or the button's label to edit it in place. Enter saves, Escape cancels.
  4. Add a second page, then give the button an action that opens it.
  5. Choose Preview above the canvas to run the app and tap through it. Return to Design to keep editing.

Three ways to work on one app

Design is for the visual structure, Code for the app's source and logic, and Sanic AI for describing what you want. All three change the same project and share one undo history: a change from any of them can be undone with the next step back.

The canvas is where you select and arrange. Preview runs the app with working buttons and navigation. Code keeps a preview beside your files that rebuilds as you type.

Saving, history and export

Projects save to your account as you work. Every accepted change is kept with the history, so you can undo, and return to the project later from any browser. Code you are still typing belongs to the current session until it is applied.

You can export a project from the dashboard, and delete a project or your account. Deletion is permanent and asks you to confirm it.

The editor is designed for a desktop screen. On a compact window the panels open as drawers, so the canvas keeps its room.

All guides