​
1. Create Your Account

Go to Shaper and sign up for a new account (you can use your email or GitHub to register). Once you’re logged in, you’ll land on your Shaper dashboard.

[Insert image of Shaper dashboard with “New Project” button]

​
2. Create a New Project

On your dashboard, click the “New Project” button to create a project. Give it a name (e.g. “My First Project”). For now, start with a blank project to learn the basics (you can also try the AI generation option later). Shaper will open the editor with a blank canvas (artboard) ready for design.

[Insert image of a blank new project canvas in the Shaper editor]

​
3. Add Your First Element (Shape)

Now add an element to your canvas. For example, select the Text tool and click on the canvas to insert a text box. Type a heading like “Hello, Shaper!”. You’ve just placed your first shape (a design element) on the artboard. You can drag it around or use the right-hand Property Panel to adjust its style (font, size, color).

[Insert image of a text heading added to the canvas, with the Property Panel showing font settings]

​
4. Preview Your Design

It’s time to see your design in action. Click the Preview (▶️ Play) button (usually at the top bar of the editor) to switch to preview mode. This will render your project as a live web page. You should see the heading you added, and you can interact with the project just like a real app. (If you added a button or other interactive elements, test them out now.)

[Insert image of the project in Preview mode, showing the “Hello, Shaper!” heading in a browser view]

​
5. (Optional) Connect to GitHub for Two-Way Sync

Shaper is Git-native, meaning it can sync your design directly with a Git repository. If you want to preserve your code or collaborate with developers, connect a repo now (you can also do this later). Click on the GitHub/Sync option and follow the prompts to authorize Shaper and select a repo. Shaper will then push your project’s code as an initial commit. From this point, any design changes you make will create new commits, and any code changes pulled from that repo will update back in Shaper – this is two-way sync in action.

(If you’re not ready to use Git yet, you can skip this step. Your project is still saved in Shaper’s cloud, and you can sync to GitHub anytime in the future.)

​
All Set! What’s Next?

You’ve just created and previewed your first Shaper project. Congratulations! In under 5 minutes, you went from zero to a live design-to-code project. From here, you can continue refining this project or start a new one.

For a deeper look at Shaper’s tools and interface, head over to the Tour the Interface next. Or, if you’re ready to build something bigger, try the Sample Project: Build a Landing Page tutorial.4. Code Editing

  • The Code Editor allows direct modifications to the UI components.
  • Any change in the design automatically updates the code.
  • Utilize Shadcn components for a consistent design system.

​
5. AI-Powered Assistance

  • Generate complete designs using AI.
  • Inline AI-powered editing allows real-time modifications.
  • AI can suggest improvements and automate repetitive tasks.

​
6. Deploying Your Project

  • Preview your design and code before deployment.
  • Share a prototype with team members for feedback.
  • Click Publish to deploy your application.