Platform documentation

Step-by-step guide to Markup Studio — from your first account to a published website with pages, theme, navbar, footer, templates, and AI tools.

Create accountSign inDashboard

Overview

Markup Studio is a visual website builder. You create a website (project), add pages, design each page in the page editor, and configure site-wide theme, navbar, and footer. Your live site is served on your custom domain when configured.

Everything you design is stored as structured data (not hand-written HTML files). You edit in the dashboard and visitors see the published version on your domain.

Steps

  1. Create an account → Sign in → Dashboard
  2. Create website → Add pages → Open page editor
  3. Configure theme, navbar, footer, and SEO
  4. Save pages → Preview → Publish on your domain

Create an account

Go to Sign Up from the homepage or `/signup`. Fill in first name, last name, email, and password (6–16 characters). Confirm the password in the second field.

Steps

  1. Open `/signup`
  2. Enter your details and matching passwords
  3. Submit — on success you are redirected to Sign In after a short message
  4. If the email is already registered, you will see an error toast

Tips

  1. Use a strong password you do not reuse elsewhere.
  2. The form includes a hidden honeypot field for bots — leave it empty.

Sign in & sign out

Use Sign In at `/signin` with your email and password. After login you are taken to the Dashboard (`/dashboard`).

Steps

  1. Open `/signin`
  2. Enter email and password → Sign In
  3. From the navbar, use Dashboard anytime while logged in
  4. Use Logout in the navbar to end your session

Tips

  1. If the session expires while you work, save-related actions show “Session expired” — sign in again.

Forgot & reset password

If you forgot your password, use Forgot password on the sign-in page (`/forgot-password`). Enter your email to receive a reset link.

Steps

  1. Submit your account email on the forgot-password form
  2. Open the link in the email (reset URL with token)
  3. Set a new password on `/reset-password`
  4. Sign in with the new password

Dashboard

The dashboard (`/dashboard`) lists all your websites. Each row shows name, domain, storage usage, subscription status, and quick actions.

Steps

  1. Click Create Website to start a new project
  2. Use row actions: Pages, Blog, Update, SEO, Footer, Navbar, Theme, images, videos
  3. Follow DNS settings on the dashboard when connecting a custom domain

Related

Open dashboardCreate website

Create a website

Creating a website registers your project in Markup Studio. You can set a display name, optional custom domain, and favicon (.ico only).

Steps

  1. Dashboard → Create Website (`/dashboard/website/create-website`)
  2. Enter website name (required)
  3. Optionally add custom domain and favicon file
  4. Submit — you return to the dashboard; open Pages for that site to add content

Tips

  1. If automatic domain connection fails, the site may still be created — you can retry from website settings later.
  2. Storage limit applies to all page content and uploads for that website.

Update website info

Change name, domain, or favicon from Update website (`/dashboard/website/update-website?uuid=…`). Access it from the pencil icon on your site row.

Steps

  1. Open update form with your site `uuid` in the URL
  2. Edit fields and save
  3. Link to SEO settings is available from this area for search indexing options

Manage pages

Each website has one or more pages (home, about, contact, etc.). Open Manage website pages from the site row (`/dashboard/website/page?uuid=…`).

Steps

  1. View all pages for the site
  2. Create page — set title, SEO fields, homepage flag, and optional template
  3. Update page — edit title and meta fields without opening the visual editor
  4. Open Build / editor for visual design
  5. Delete or duplicate pages when available

Related

Page templates (jump)

Create a page

When creating a page you choose metadata and optionally a ready-made template. Templates pre-fill the editor with sections you can still change completely.

Steps

  1. Pages list → Create page (`/dashboard/website/page/create-page?uuid=…`)
  2. Enter title, meta description/keywords if needed
  3. Mark homepage only for one page per site (the main URL `/`)
  4. Under Start from a template, pick a layout or Blank
  5. Submit — you are sent to the page editor for that page

Tips

  1. Only active templates appear for regular users.
  2. Homepage conflicts show an error if another homepage already exists.

Page editor (build-page)

The visual editor (`/dashboard/website/page/build-page?uuid=…&pageId=…`) is where you design the page. The canvas shows your content; the left sidebar has Blocks, AI, Style, and Layout tabs.

The top toolbar has device preview (mobile/tablet/desktop), Theme link, Templates, Save, and Preview.

Steps

  1. Back — return to the pages list
  2. Devices — switch breakpoint; styles are per device
  3. Theme — open site-wide color and font settings
  4. Templates — replace page content with another template or blank (confirm required)
  5. Save — store your page design and fonts
  6. Preview — open authenticated preview in a new tab (`/preview/{pageId}`)

Tips

  1. The site navbar and footer are not drawn on the canvas — configure them separately; see them in Preview or on the live domain.
  2. Always Save after large changes. Template apply saves automatically.

Blocks tab — add content

Drag elements from Blocks onto the canvas or into sections. Use Ready to use for full sections (hero, about, services, FAQ, contact form, gallery, slider, reviews, team, etc.).

Steps

  1. Expand categories in the Blocks panel
  2. Drag a block or section into the drop zone
  3. Click an element to select it; use toolbars for special types
  4. Double-click icons and images/videos to open pickers
  5. Double-click gallery / slider / grid / reviews for dedicated toolbars

Tips

  1. Contact forms need a receiver email saved in form settings.
  2. Review cards should use the review-stars element, not typed star characters.

Style & Layout tabs

Style — typography, colors, spacing, borders, shadows, display/flex/grid, animations (Animate.css), and scroll animations (AOS) for the selected element.

Layout — sortable tree of all elements; reorder or select nested items.

Steps

  1. Select an element on the canvas or in the Layout tree
  2. Style tab: edit properties; changes apply to the current device breakpoint
  3. Use hover toggle when editing hover pseudo-styles
  4. Layout tab: drag rows to reorder sections

Tips

  1. Flex-child options in Other appear only when the parent uses flex display.
  2. Clear scroll animation name to reset related AOS fields together.

Page templates

Templates are pre-built page layouts maintained by the platform. You can use them when creating a page or later via Templates in the editor toolbar.

Steps

  1. On create: pick a card or Blank → create page → editor opens with that content
  2. In editor: Templates → choose layout → Apply → confirm (replaces current design)
  3. Choose Blank to clear the page to an empty canvas

Tips

  1. Applying a template cannot be undone except by applying another template or manual editing.
  2. Page-level fonts from the template are applied; site theme still controls global colors unless overridden in Style.

AI Page Composer

The AI tab generates page sections from your business brief using ready-made presets only (no raw HTML from the AI). You can generate a full page or regenerate one section.

Steps

  1. Open the AI tab in the page editor
  2. Full page: fill business name, offer, audience, style, goal, highlights, language; optional colors and “include contact”
  3. Run generate → review plan → confirm to replace canvas content
  4. One section: pick a section from the dropdown, add a short prompt, regenerate

Tips

  1. After you generate a page or section, stock photos are added automatically where the layout needs them (hero, about, services, gallery, slider, team, and similar blocks).
  2. If generation fails or times out, wait a moment and try again with a shorter brief.
  3. AI output is destructive — confirm dialogs warn before replace.
  4. You can still edit every block afterward in Blocks, Style, and Layout like any other content.

Site theme (colors & fonts)

Design theme (`/dashboard/website/design-theme?uuid=…`) sets site-wide primary/secondary/accent/text/background colors and default Google fonts. Pages can override primary and secondary fonts per page in the editor (saved with the page).

Steps

  1. Open Design theme from the site row (grid icon)
  2. Adjust color pickers and font dropdowns
  3. Save — theme applies to preview and published site
  4. In the editor toolbar, Theme opens the same settings; swatches show current colors

Tips

  1. Effective fonts on a page: page fonts if set, otherwise theme fonts.

Navbar settings

The navigation bar is site-wide, not part of page content. Configure it at `/dashboard/website/navbar-settings?uuid=…`.

Steps

  1. Enable/disable navbar
  2. Upload logo (image file, not SVG)
  3. Choose layout: drawer left or drawer right on mobile
  4. Hide pages from nav or add custom links (paths like `/about` or anchors `#section-id`)
  5. Theme colors for navbar background/text or custom hex values
  6. Save — verify on Preview or live site

Tips

  1. A Blog link appears automatically when you have at least one published blog post.
  2. Navbar does not appear inside the build-page canvas by design.

Footer settings

The footer is site-wide, like the navbar. Configure at `/dashboard/website/footer-settings?uuid=…`.

Steps

  1. Enable/disable footer
  2. Upload footer logo (separate from navbar logo)
  3. Edit brand text, columns, link groups, and social links (allowed platforms only)
  4. Set footer colors
  5. Save — appears on all published pages and blog views

Tips

  1. Social URLs used in SEO schema may include external links from footer social entries.

SEO & search indexing

SEO settings (`/dashboard/website/seo-settings?uuid=…`) control whether search engines may index your custom domain site. Per-page title and meta description are set on each page’s create/update forms.

Steps

  1. Set Allow search engines to index on or off
  2. Save settings
  3. On a live domain: `/sitemap.xml` and `/robots.txt` are generated dynamically
  4. Use links on the SEO page to inspect live sitemap/robots when domain is configured

Tips

  1. Sitemap requires a configured custom domain; platform localhost URLs are not customer sitemaps.
  2. Preview URLs stay noindex — they are not listed in the sitemap.

Blog

Blog posts are separate from page builder content. Manage them at `/dashboard/website/blog?uuid=…`.

Steps

  1. Create post — title, slug, excerpt, body, cover image, template (classic or split), publish flag
  2. Edit or delete posts from the list
  3. Published posts appear at `https://your-domain.com/blog` on the live site
  4. Preview posts at `/preview/blog?uuid=…` while logged in

Tips

  1. Slug `blog` is reserved — do not use it for a regular page slug.

Images & videos

Each website has an image library and video library from the site row. In the editor, double-click images or videos to choose from your library or set a URL.

Steps

  1. Open the image or video manager from the site row → upload files
  2. In the page editor, double-click an image or video block to update it
  3. Use video settings in the popup for playback options (controls, poster, and source)

Tips

  1. Storage meter on the dashboard includes your page designs and uploaded media.
  2. User images are not SVG for security reasons.

Forms on the published site

Contact (and other) forms you add in the editor work on your live website. When a visitor submits, they see a success or error message, and you receive the message at the receiver email you configured in the form settings.

Steps

  1. Add a contact form section or form elements in the editor
  2. Set receiver email in form element settings and save the page
  3. On publish, visitors submit — success/error shown as toast on the live page

Tips

  1. Test forms on your live custom domain. Preview mode may not send real submissions.

Live website & domain

Visitors open your site on the custom domain you configured. Pages are resolved by path; homepage is the page marked as homepage.

Steps

  1. Add custom domain in website settings
  2. Point DNS as shown in dashboard DNS settings
  3. Publish content by saving pages — no separate “publish” button for pages
  4. Subscribe/renew via billing actions on the site row when required

Tips

  1. Suspended sites return an error on the public URL until subscription is restored.

Storage & subscription

Each website has a storage quota (MB). Saving large pages or many media files increases usage. Subscription status and renewal appear on the dashboard site row.

Steps

  1. Watch the storage bar on the site row
  2. If save fails with storage error, delete unused media or pages
  3. Use Subscribe when the trial or period is ending