From first click
to your next project.

Quick start

You can start in the browser. The studio does not require an account.

Prefer a complete starting point? Explore the 14 project templates. Choose a use case and framework to load its theme, layout, and pages into Project Builder.

1. Open Project Builder and give your project a name.
2. Choose React + Vite or Next.js App Router, then select your project type and pages.
3. Open the theme settings to choose a design style, palette, typography, and layout.
4. Select Preview in new tab to run the generated application.
5. When you are ready, purchase the source code. Standard projects cost ₹499; ERP projects cost ₹799. Your first successful purchase receives ₹100 off, once per registered email and mobile.

Choose your foundation

Select ERP’s for a module-based operations workspace: Sales, Procurement, Inventory, Finance, People and Production. ERP defaults include the connected modules, authentication, tasks, calendar and account pages. Choose an ERP theme preset in the builder or start from an ERP template.

The framework controls the structure of your exported project. Both options use React and TypeScript.

Project types

• ERP: connected purchasing, stock, finance, people and production modules.
• Dashboard: connected business pages, data views, forms, and collaboration features.
• Customer workspace: customer and order workflows with supporting pages.

Keep the starter page selection or choose your own. Required feature dependencies are added automatically. Theme Builder is included in every generated application.

Make the design your own

Use the settings button in the studio to open the non-modal theme panel. The page stays visible while you preview changes.

• Choose Modern, Glassmorphism, Neumorphism, Claymorphism, or Minimal.
• Set primary, accent, background, surface, border, and chart colors.
• Use separate light and dark palettes, or follow the system preference.
• Adjust typography, radius, density, shadows, motion, and layout dimensions.

Select Apply theme to keep the studio theme. Generated projects include a standalone /theme page: select Save theme to store appearance preferences on the device. Reset restores the theme bundled with the export.

Explore the component library

Open Components to browse interactive examples by category. Select a family in the sidebar or search by name, category, or variant.

• Code & styles: inspect the component’s React source and CSS Module.
• Copy: copy the selected variant’s React source.
• Share: create a link to its preview and code with the selected theme.
• Download: get the matching component, styles, and a runnable example.

Examples demonstrate local interactions. Full application pages use the local static sample-data adapter. File and media examples do not provide a storage/upload service.

Run a real preview

The preview starts the chosen framework with generated source. The first compilation can take longer; keep the builder tab open while the preview starts. Configuration changes update the running project.

Preview applications use synthetic sample records. Demo login is autofilled and uses public sample credentials. It does not protect real data. No database or real authentication service is included.

Using GitHub Codespaces

Preview servers run on their own ports. If a generated preview URL is not reachable, open the Codespaces Ports panel, locate the port shown in that URL, forward it, and use Open in Browser.

If the preview expires or fails to start, return to Project Builder and use Retry. Restart the studio after updating server-side preview code.

Export and run your application

The ZIP contains selected application features, TypeScript source, CSS Modules, theme tokens, configuration, and setup instructions. All business data comes from static fixtures. No database, API server, payment credentials, store users or purchase records are exported.

What CSS is exported?

Each selected composed component includes its matching CSS Module, filtered to the variants you selected. Shared components, layout rules, responsive styles and theme tokens remain because your application depends on them. Unreferenced CSS files are removed. The export-manifest.json file lists the included styles, selected features and variants.

Unzip the project, open its directory in a terminal, and use Node.js 22.13 or newer:

npm install
npm run dev

Read the exported README for its local URL and framework commands. Demo login is autofilled as a static UI example. Real registration, payment collection and purchase history belong to your separate Project Builder store account. After UPI payment, submit the UTR and wait for admin verification before downloading source.

Build for production

npm run build
npm start

The /theme page stays in the exported application. Project Builder and the studio’s Component Library are not included.

Deployment notes

React exports can be hosted as static assets with a fallback to index.html for client routes. Next.js uses its normal build and start commands. The exported sample applications need no database. The Project Builder store alone keeps customer accounts, payment approvals and purchase history in its commerce database.

The Project Builder studio’s preview runner also needs permission to spawn Node processes and bind ports. Exported applications run independently of that preview service.

For the marketing site’s canonical URLs, sitemap, and social metadata, set NEXT_PUBLIC_SITE_URL to the public website origin before building.

Common questions