Layouter.dev

Quick start: 1) Drag structure/layout blocks from the left. 2) Click a paragraph and drag across words. 3) Apply inline tags in Properties.

Structure

header
nav
main
section
footer

Layout

div
article

Content

h1
h2
h3
p
img
input
button
table

Inline text

Select words inside a paragraph, then apply inline tags from the Properties panel.

Patterns

Pre-built arrangements of real HTML elements — drag one in to see how it's structured.

Hero
Call to Action
Cards
Search Bar
Form
Banner
Breadcrumbs
Pagination
Progress Indicator
Tags

Menu Types

Horizontal Menu
Hamburger Menu
Dropdown Menu
Megamenu

Properties

Click an element on the canvas to edit its properties.
layout-template.html

  
About