webyaam
01 / 15

Design every blockon a live canvas.

Select a block on the canvas or in the Navigator. Edit its content and layout in the Design tab, and its typography, spacing, color and effects in the Style tab.

  1. Screen 1 of 2

    Design & Style

    A real look at visual editor in the builder. Scroll to explore.

  2. 01

    Select on the canvas

    Click any block. It gets a selection outline and a quick toolbar right where you are working.

  3. 02

    Navigator tree

    Every section, stack and element as a tree. Selection stays in sync with the canvas.

  4. 03

    Content, Design, Style

    Three tabs for each block: what it says, how it is laid out, and how it looks.

  5. 04

    Styles per breakpoint

    Switch between desktop, tablet, landscape and mobile before you change a value.

  6. Screen 2 of 2

    Mobile breakpoint

    The canvas switched to the mobile breakpoint at 100% zoom, with the Style tab beside it.

  7. 01

    Switch screen size

    Desktop, tablet, landscape and mobile are one click away in the canvas toolbar.

  8. 02

    The real mobile layout

    The canvas renders your page at the selected width, so you edit what visitors will see.

  9. 03

    Per-breakpoint styles

    Desktop styles apply everywhere unless a smaller breakpoint overrides them.

The Webyaam builder with the Navigator, a selected heading on the canvas and the Style tab open.

Real screenshots of the Webyaam builder with a demo site.

01 What you get

Visual editor,
in detail.

Up closeSelect on the canvas
01

Live canvas

The canvas renders your real Astro project, so what you select is what ships.

02

Design and Style tabs

Content and layout in one tab, the look in the other. No hunting through panels.

03

Navigator in sync

Selection stays in sync between the canvas and the Navigator tree.

04

Reusable components

Turn repeated pieces into components and edit every instance from one source.

02 How it works

  1. 1

    Select

    Click any block on the canvas or pick it in the Navigator.

  2. 2

    Shape

    Edit content in Design, then refine the look in Style.

  3. 3

    Save

    Changes are saved to your project's source as you work.

Your next website starts here

Your next website,block by block.

Start free in the builder. Your first site gets a 7-day trial with Grow features, no credit card needed.