​
Introduction

Welcome to the Creatr dashboard! This page provides an overview of each section you’ll see when building or editing your project. Whether you’re generating code with AI, managing versions, or deploying to production, the dashboard is designed to give you full control of your web app’s lifecycle. Creatr Dashboard - Light Mode Creatr Dashboard - Dark Mode

​
Top Bar

​
Project Name

  • Editable Name: Click on the project name to rename it directly, or head to Settings (in the sidebar) for more advanced configuration options.
  • Fork: Create a new branch of your project. This is helpful if you want to explore different directions without losing your current progress.

​
Export & Deploy

  • Export: Choose between:
    • Download (ZIP file)
    • CLI Export (creatrx)
    • GitHub Export (automatically push your code to a new GitHub repository)
  • Deploy: One-click deployment for your web app, with a shareable link once it’s live.

​
Share

  • Share Links: Generate a shareable link to show off your project or collaborate with others.

​
1. All Chats

  • AI Interaction: This is where you’ll interact with Creatr AI. Enter prompts for edits, improvements, or new features.
  • Conversation History: Review past messages to track changes or revisit previous AI suggestions.

​
2. Version History

  • Edits & Revisions: Each saved iteration of your project appears here.
  • Preview / Rollback: Quickly switch to an older version or preview it to see how it compares to your current build.

​
3. Assets

  • Manage Web App Assets: Access images, fonts, or other media used in your project.
  • Three Options:
    • Unsplash Integration: Browse and import free stock images.
    • Upload: Add your own images or files.
    • Generate with AI: Create custom visuals via AI-generated art.

​
Main Workspace

​
Preview Screen

  • Real-Time Preview: See changes reflected instantly as you edit prompts or code.
  • Code & Components Sections: Toggle between a direct code view or a curated component library to quickly add pre-built UI elements.

​
Select Element

  • Element Highlighting: Clicking Select Element lets you hover over any part of your web app. A border will outline the element.
  • Granular Edits: Once selected, you can prompt Creatr AI to modify or replace that specific element.

​
Bottom Actions

  • Attach Icon: Easily upload images or documents into the chat for reference—just drag and drop, or browse your files.
  • Knowledge Base: Access project-level guidelines, best practices, and references. A powerful way to ensure consistency and clarity across your entire app.
Beyond the main tabs, you’ll find additional controls in the sidebar:
  • Support & Calls: Reach out to our support team or book a call with the founder for direct assistance.
  • Integrations: Quickly enable or configure services like Supabase, OpenAI, and Resend to enhance your app with backend, AI, or email capabilities.
  • Project Analytics: Monitor metrics and usage data once your web app is deployed.
  • Tokens & Settings:
    • Tokens: Track how many LLM tokens you’ve used for AI-driven features.
    • Settings: Manage global project settings, rename your project, or delete it if needed.
By understanding each part of the Creatr dashboard, you’ll be able to make the most of our AI-powered features, manage your web app’s lifecycle, and effortlessly integrate powerful services. Explore, experiment, and enjoy bringing your ideas to life!