Builder

The Builder is a visual drag-and-drop editor that allows you to create and customize pages without writing code. You can add components, edit content, preview changes, and export your project directly from the builder interface.

⚠️ This builder is currently in beta. Some features may change and minor issues may occur while using it.

What you can do

  • Create and manage pages
  • Add pre built blocks using drag and drop
  • Edit text and images directly
  • Preview your page before exporting
  • Save your project changes
  • Export the generated project files

Builder Interface

The builder interface is divided into several sections that help you design and manage your pages efficiently.

  • Canvas : The canvas is the main workspace where you build your page. All components that you add will appear in this area.
  • Components Sidebar : The sidebar contains available components. You can drag and drop them into the canvas to build your layout.
  • Toolbar : The toolbar provides actions such as saving the project, previewing the page, exporting the project, and toggling edit mode.
  • Pages Panel : The pages panel allows you to manage pages in your project. You can create, rename, and delete pages from here.

Working With Components

Components are the building blocks used to design your page. You can add, move, edit, and remove components directly inside the builder.

Add a Component

You can add new components by dragging them from the block library sidebar into the canvas.

  1. Open the block library sidebar.
  2. Drag a block.
  3. Drop it onto the canvas.

Edit Text

Text inside components can be edited directly in the canvas.

  1. Click on the text you want to edit.
  2. Start typing to change the content.
  3. Your changes will update instantly.

Move a Component

Components can be reordered inside the canvas using the arrow controls. These buttons allow you to move a component up or down within the page layout.

  1. Select the component.
  2. Click the arrow to move the component up.
  3. Click the arrow to move the component down.

Delete a Component

If a component is no longer needed, it can be removed from the page.

  1. Select the component.
  2. Click the delete option.
  3. The component will be removed from the canvas.

Pages Management

The builder allows you to manage multiple pages within a project. You can create new pages, switch between them, rename them, or delete pages you no longer need.

Manage Pages

  1. Open the Pages Panel.
  2. Click Add Page to create a new page.
  3. Select a page to switch and edit it.
  4. Rename a page if needed.
  5. Delete pages that are no longer required.

Edit Mode

Edit Mode controls whether the page can be modified inside the builder. When Edit Mode is enabled, you can add, move, and edit components. When it is disabled, the page behaves like a preview.

Edit Mode ON

  • Components can be edited.
  • Drag and drop is enabled.
  • Editing controls and tooltips are visible.

Edit Mode OFF

  • Editing is disabled.
  • The page behaves like a preview.
  • No editing controls are shown.

Save Project

Saving stores the latest changes you make in the builder. This allows you to continue working on your project later.

⚠️ Important: Projects are saved locally in your browser using LocalStorage. They are not stored on a server or database.

If you clear your browser storage, cache, or switch browsers/devices, your saved projects will be permanently lost.

How to Save

  1. Make changes to your page.
  2. Click the Save button in the toolbar.
  3. Your latest changes will be stored in the browser.

Preview Page

Preview mode allows you to view your project as a real website. When you open preview, the page will open in a new browser tab so you can interact with it without affecting the builder.

How to Preview

  1. Click the Preview button in the toolbar.
  2. A new browser tab will open.
  3. Your page will load in preview mode.
  4. Use the page selector to navigate between pages.
  5. Return to the builder tab to continue editing.

Export Project

Export allows you to download the generated project files so you can use them outside the builder.

🔒 Login Required: You must be signed in to export your project. If you are not logged in, the builder will ask you to sign in before exporting.

How to Export

  1. Click the Export button in the toolbar.
  2. If you are not signed in, you will be prompted to log in.
  3. After signing in, the builder will generate your project files.
  4. The files will be downloaded to your computer.

How to Use Pro Blocks in the Builder

The builder includes both free and Pro components. Pro blocks provide advanced UI sections and layouts, but require an active Shadcnspace plan to use.

Blocks with the Pro label are premium components available only to users with an active Shadcnspace plan.

Using Pro Blocks

  1. Open the components panel.
  2. Select a block marked as Upgrade to Pro.
  3. If you are not signed in, you will be asked to log in.
  4. If you do not have an active plan, a message will appear with an option to purchase a plan from Shadcnspace.
  5. If you choose not to purchase a plan, the block will remain locked and cannot be added to your page.