Skip to main content

Code Editor

The code editor gives you direct access to the Next.js and Tailwind CSS source code of your app. Every page is a real .tsx file, and every style is a Tailwind class.

Editing code and downloading your project require a Paid Plan

Opening the Code Editor​

Click the <> button in the top left of the toolbar. The editor opens with a file tree on the left and the code on the right.

Code Editor

Select a file from the tree to open it. Your main page content lives in src/app/page.tsx.

Project Structure​

The file tree mirrors a standard Next.js project:

  • src/app/page.tsx - your page content (JSX + Tailwind classes)
  • src/app/layout.tsx - the root layout wrapping all pages
  • src/app/globals.css - global styles
  • src/components/ - reusable components
  • src/lib/ - utility functions
  • src/data/ - data files and content
  • public/ - static assets (images, fonts)

What You Can Edit​

  • Modify JSX structure and content
  • Add or change Tailwind classes directly in the markup
  • Add custom attributes (IDs, data attributes, aria labels)
  • Write custom logic, state, and event handlers
  • Import and use any React component
  • Embed third-party widgets (Stripe, Calendly, PayPal, etc.)

Download Project​

Click the Download Project button to export your full source code as a zip file. You can run it locally or deploy it anywhere that supports Next.js.

Tips​

  • Changes sync back to the visual builder. Switch between code and canvas using the Canvas button.
  • Press ⌘Z / ⌃Z to undo mistakes.
  • Make one change at a time so you can see what each edit does.