Accessing Anima Playground

Start a project

You can start a new project in four ways:

From a Figma design

Upload a frame or import a multi-screen flow. Anima converts your designs into responsive layouts and clean React/HTML code that you can edit immediately.
You can paste a link directly or import via the Anima – Figma to Code plugin (recommended if your design contains variables).

From a prompt

Describe what you want to build. The Playground generates a working interface with structure, components, and styles you can refine with additional prompts or manual edits.

From any webpage URL (clone)

Paste a URL, and Anima recreates the layout, assets, and structure in editable code. This is great for onboarding, internal tools, or kicking off new concepts.

From a wireframe or flow chart

Bring in low-fidelity wireframes or flow diagrams. Anima interprets the structure and generates a functional UI and app flow, giving your team a quick starting point before investing in visual design.

After creation, your project opens in the Playground, where you can start vibe coding right away.

Edit your project

The Playground is your interactive space to build and iterate.

Use natural language

Ask for changes in plain English:
“Make the header sticky,” “Add a form,” “Style this card,” or “Create a dark mode.”

Edit the code directly

Every AI action produces clean, editable code. Modify anything while keeping full control.

Add and rearrange screens

Build flows by importing more Figma frames or creating new screens from prompts. The Playground keeps everything in sync.

Preview instantly

Every change updates the live preview so you can validate interactions and UI before publishing.

Connect a backend (in beta)

Make your app dynamic by connecting data and APIs.

Use Anima’s built-in database (optional)

Create tables, define fields, and connect components to real data in minutes.
Great for prototypes, internal tools, and lightweight production apps.

Add user authentication (optional)

Enable sign-in, sign-up, and protected routes with a simple prompt or by using Anima’s auth blocks.
Add email/password and Google authentication to your app and track your app users via Anima Data.

Publish your app

When you’re ready to share your work, publish with one click.

Deploy to a custom domain

Connect your domain and host your app directly from Anima.

Use the default Anima URL

Instantly share your prototype or app with your team.

Export the code

Download clean React/HTML/Tailwind code or sync it into your existing codebase.

Publishing is instant, and updates apply automatically whenever you republish.

(Advanced) Set your code preferences:

Set your code preferences by clicking the settings icon next to the tool name. Choose your framework, UI library, language, and styling before you start vibe coding.