CoffeeCup Site Designer · Official Guide

Master
Site Designer.

Everything you need to design, build, and publish professional websites without writing a single line of code.

18 sections 126+ articles 3 CSS frameworks

Get started Read the intro

New here? Start the setup guide Tutorials Build real projects step by step Reference Keyboard shortcuts & quick tables

Live canvas

Design on a real browser engine. What you see is exactly what gets published.

CSS frameworks

Foundation, Bootstrap, Materialize, or frameworkless — your choice.

Fully responsive

Drag the width slider. Enter breakpoint mode. Fix it once, fixed everywhere.

Publish anywhere

S-Drive, FTP, or export clean static HTML/CSS/JS to any host.

Browse all topics

Everything in the guide, organized by area. Pick any topic to dive in.

Get started Install, set up, and build your first project

The canvas Select, edit, and arrange elements on the live canvas

Control panes Content, Design, Effects, Outline, and CSS panes

App toolbar Templates, Resources, Pages, Preview, and Settings

Elements Every element: text, media, layout, and interactive

Components & Symbols Reusable blocks and globally synced Symbols

Classes & selectors Classes, selectors, and the CSS engine under the hood

Style controls Typography, color, spacing, borders, and shadows

Layout systems CSS Grid and Flexbox layout containers

Responsive Width slider, breakpoints, and mobile-first editing

Effects Transitions, keyframe animations, and hover effects

Pages & site Page Manager, SEO metadata, and Open Graph

Frameworks Foundation 6, Bootstrap 4, and Materialize reference

Publish & export S-Drive, FTP publishing, and HTML export

Tutorials Step-by-step projects to build real websites

Troubleshooting Common issues and how to resolve them fast

Reference Keyboard shortcuts and quick-reference tables

Releases Changelog and version history

Popular articles

The most visited pages in the guide — a good place to start.

Component Library

Accelerate your workflow.
Drop in. Customize. Launch.

The CoffeeCup component library gives you hundreds of professionally designed UI blocks ready to place on your canvas — heroes, navbars, cards, testimonials, and more. Stop building from scratch; start from something great.

One click to place any block directly on your canvas
Fully editable — adjust colors, fonts, and layout freely
New designs added regularly by the CoffeeCup team

Browse the component library

CoffeeCup on YouTube

Learn by watching

Short, focused video tutorials for every feature — straight from the CoffeeCup team.

Watch on YouTube Browse video library

Site Designer Overview

Working With Text Elements

Custom Breakpoints

Working with Templates

Ready to build?

Download Site Designer and start your first project in minutes.

Get Site Designer