Skip to Content
DocsGetting StartedYour First Project

Your First Project

This guide walks you through creating your first page in Ycode and using the visual editor. These steps are the same whether you are using Ycode Cloud or the Open Source version.

Open the Editor

Ycode Cloud: Sign in at ycode.com  and open your project. You are taken directly to the editor.

Ycode Open Source: Go to your Ycode site (e.g. https://your-site.vercel.app or http://localhost:3002) and navigate to /ycode. If you have not run the setup wizard yet, you will be redirected to /ycode/welcome to create your admin account first.

Create Your First Page

Step 1: Add a page

  1. In the left sidebar, find the Pages section.
  2. Click Add Page (or the plus icon).
  3. Enter a name (e.g. “Home”) and a URL slug (e.g. home or leave empty for the homepage).
  4. Click Create. You are taken to the editor with a blank canvas.

Step 2: Understand the layout

The editor has three main areas:

  • Left sidebar: Layers and pages. You see the page tree, add or reorder pages, and select elements in the layer panel.
  • Center canvas: Live preview of your page. You drag elements here and see changes in real time.
  • Right panel: Design controls. When you select an element, you adjust styles, spacing, typography, and other properties here.

Step 3: Add elements

  1. Open the Element Library (usually in the left sidebar or a toolbar).
  2. Drag an element onto the canvas. Start with basics like Text, Heading, Image, or Button.
  3. Drop it where you want it. The element appears on the canvas and in the layers panel.
  4. Click an element to select it. The right panel shows its design controls.

Step 4: Style with design controls

With an element selected, use the right panel to:

  • Change colors, fonts, and sizes
  • Adjust padding and margin
  • Add borders, shadows, or backgrounds
  • Set alignment and layout options

Changes apply immediately on the canvas.

Step 5: Preview and publish

  1. Click Preview to see how the page looks. Use the device toggles to check different screen sizes.
  2. When you are satisfied, click Publish to make your changes live.
  3. Visit the page URL on your site to see the published version.

Editor Tips

  • Layers: Use the layers panel to select nested elements and reorder them. Parent elements contain children.
  • Responsive design: Switch breakpoints (desktop, tablet, mobile) to adjust layouts and styles per device.
  • Undo/redo: Use the toolbar or keyboard shortcuts to undo and redo changes.
  • Components: Save elements or groups as reusable components for consistency across pages.

Next Steps

  • Editor — Layers, design controls, and responsive editing
  • CMS — Create collections and dynamic pages
  • Forms — Build forms and manage submissions
Last updated on
ConfigurationEditor