How Ampernote works

A visual block editor designed for content planning. Build page structures, write content, and hand off to development—all without touching code.

The Core Idea

Ampernote bridges the gap between content strategy and web development. It's not about designing how pages look—it's about planning what they say and how that content is structured.

✕

Not a Design Tool

We don't try to be Figma or Webflow. No pixel pushing, no visual design.

✕

Not a CMS

We don't publish pages. We help you plan content that goes into your CMS.

✓

Content Planning

Structure your content visually. Write copy. Hand off with clarity.

Your Workflow

From blank canvas to structured content in a few simple steps.

01

Create or Start from Template

Begin with a blank document or choose from your saved templates. Templates preserve structure while letting you customize content.

  • Start fresh for unique pages
  • Use templates for repeating layouts
  • Lock template structure to prevent changes
01
02

Build Your Structure

Drag blocks from the palette to build your page structure. Sections, columns, and groups create the framework.

  • Drag and drop from the block palette
  • Nest blocks for complex layouts
  • Rearrange with drag and drop
02
03

Write Your Content

Fill in your headings, text, and other content blocks. Focus on the message without design distractions.

  • Rich text editing with formatting
  • Optional character limits
  • Clean, focused writing experience
03
04

Organize with Projects

Keep documents organized in projects. Share with your team and maintain content across your site.

  • Group related documents
  • Team collaboration
  • Template library per project
04
05

Export & Hand Off

Your structured content is ready for developers. Clear hierarchy translates directly to implementation.

  • Structured content export
  • Clear content hierarchy
  • Ready for any CMS or framework
05

Block Types

Nine essential blocks for structuring any web page. No bloat—just what you need.

§

Section

High-level container with padding and margin controls. Perfect for major page divisions.

▣

Group

Simple container for grouping related content with padding.

▤

Columns

Create 2-6 column layouts. Each column holds its own content independently.

▦

Grid

Sequential grid layout where content flows automatically.

H

Heading

Headings H1-H6 with rich text formatting support.

Text

Rich text paragraphs with bold, italic, and list formatting.

🖼

Image

Image placeholder with aspect ratio control and alt text.

🔘

Button

Call-to-action buttons with customizable text and links.

▢

Placeholder

Wireframe-style placeholder for future content.

See it in action

Try the interactive demo and build a page structure yourself. No account required.

Try the Demo→