Let's get you creating websites!
Everything you need to build beautiful sites. Follow our guides, watch tutorials, or jump straight into editing.
Quick Start
Create or Choose a Site
Duplicate the _template folder in Dropbox and rename it, or select an existing site
Add Pages
Create your home page and any subpages you need
Add Sections
Build your page with images, videos, and text sections
Style Your Sections
Adjust aspect ratios, spacing, and layout for each section
Publish!
Hit the green button—then click "View Site" in the success message to see it live
Pro tip
Your changes are automatically saved to Dropbox when you click Save. But remember—they won't appear on your live site until you hit Publish!
Video Tutorials
A complete walkthrough of the UWD Editor basics
Learn how to add and arrange sections
Customize your site and go live
Step-by-Step Guides
How to start a brand new site from scratch
- Open Dropbox — Navigate to the Sites folder
- Duplicate _template — Copy the
_templatefolder and give it your site name (e.g., "my-new-project") - Add your images — Drop your image files into the new folder
- Refresh the editor — Your new site will appear in the sidebar
- Edit the site info — Click on your site, go to Site Settings, and update the title and description
How to add, edit, and rearrange sections on your page
- Open the page — Click on a site in the sidebar, then click "Pages" to see all pages
- Click on a page — Select any page to open the section editor
- Add a section — Use "Add Section" at the top (inserts first) or bottom (inserts last) and choose a type
- Edit section content — Click the edit icon (pencil) to open the section editor
- Reorder sections — Drag sections using the grip handle on the left
- Save your work — Click "Save" to store changes, then "Publish" to go live
How to get your images into the editor
Option 1: Upload from the Editor (Recommended)
- Go to All Images — Click "All Images" in the sidebar
- Select a site — Click the site badge where you want to add images
- Click "Upload Images" — Select one or more images from your computer
- Wait for optimization — Images show a spinner while processing
Option 2: Upload via Dropbox
- Upload to Dropbox — Add images to the site's folder (e.g.,
Sites/elements/) - Click Rescan — In the All Images page, click the rescan button
How to organize pages with subpages (e.g., Projects with individual project pages)
- Create a parent page — Add a page like "Projects" using the "Add Page" button
- Add child pages — Click the "+" button next to the parent page, or drag existing pages onto it
- Organize hierarchy — Drag pages to reorder or move between parents
- Add a Subpage Grid — Edit the parent page and add a "Subpage Grid" section to display all children
- Publish — Publish the parent page to see the grid with all child pages
/projects/project-name/How to offer PDFs, ZIPs, and other files for download
- Upload files — Go to "Files" in the sidebar, select a site, and click "Upload Files" — or add files to the site's Dropbox folder and click "Rescan"
- Edit a page — Open the page where you want to show downloads
- Add a File Download section — Click "Add Section" and choose "File Download"
- Add files — Click "Add File" and use the picker to select a file. Optionally set a display name
- Publish — Save and publish the page. Only referenced files are uploaded to the server
How to sell products with Stripe integration
- Configure Stripe — Add your Stripe API keys (test and live) as environment variables in Vercel. Set up a webhook endpoint in Stripe Dashboard pointing to your editor's webhook URL
- Select your shop site — Go to Settings > Connections > Shop and choose which site is the shop
- Create product pages — Add subpages under a parent page (e.g., "Sculptures" under "Shop"). On each subpage, add an image section and a "Product" section
- Connect Stripe products — In each Product section, click "Connect Stripe Product" and search for your product by name. Price and currency sync automatically
- Add a Product Grid — On the parent page, add a "Product Grid" section to display all products in a card layout
- Create the cart page — In Shop settings, click "Create Cart Page" to add a cart page with a pre-configured Cart section
- Set stock levels — In Stripe, add a "stock" metadata field to products with the available quantity. Leave empty for unlimited stock
- Publish — Publish your shop site. The cart icon appears in the header, linking to the cart page
Customize fonts, colors, and layout for all sites
- Go to Global Styling — In the sidebar under "Global Settings", click "Styling"
- Choose a section — Layout, Backgrounds, Typography, Header, Footer, or any section type
- Switch Desktop/Mobile — Use the tabs to set different values for each (except Backgrounds which is desktop-only)
- Apply Styles — Click the green "Apply Styles" button to update all sites
Feature Guide
- Full Video
Vimeo background video with optional overlay text
- Full Image
Edge-to-edge image with optional caption and link
- Two Images
Side-by-side images with separate links (stack on mobile)
- Image + Text
Image paired with rich text, optional image link and CTA button
- Text Only
Multi-column rich text section with optional CTA button
- Subpage Grid
Grid of child pages with thumbnails and titles
- Empty Space
Adjustable vertical spacing between sections
- File Download
Downloadable file list with title, sizes, and download buttons
- Product
Product info with Stripe integration — real-time price, stock tracking, and Add to Cart
- Product Grid
Grid of products from all subpage levels with item limit, sort order, and hide-sold toggle
- Cart
Shopping cart page with item list, quantity controls, and Stripe checkout (shop sites only)
- Section ID
Custom anchor ID for smooth scroll links
- Text Styles
Normal, Heading 1-6 formatting
- Formatting
Bold, italic, and strikethrough text
- Links
Add hyperlinks to any text
- Lists
Bulleted and numbered lists
- Undo/Redo
Undo and redo your changes
- Internal Page
Link to pages on your site or other sites
- Cross-Site Links
Dropdown shows pages from all sites, grouped by site name
- Jump to Section
Smooth scroll to any section on the page
- External URL
Link to other websites (opens in new tab)
- Section ID
Custom anchor name like #about or #contact
- Image Links
Image + Text sections can have a clickable image link
- Two Images Links
Left and right images can have separate links
- CTA Buttons
Button links at end of Text Only and Image + Text sections
- Layout
Container width for your content
- Backgrounds
Header, page, and footer colors for light/dark modes
- Typography
Fonts and sizes for body text, headings, and captions
- Elements
Button font, colors, padding, and outline styling
- Header
Header width, padding, logo size, site title font
- Menu
Fullscreen menu alignment, site/page fonts, spacing
- Footer
Footer layout, navigation, social icons
- Sections
Padding, gaps, and aspect ratios per section type
- Cart
Cart page styling — padding, item images, checkout button colors (desktop/mobile)
- Horizontal Align
Position menu left/center/right in viewport
- Vertical Align
Position menu top/center/bottom in viewport
- Text Alignment
Align items within the menu container
- Sites Navigation
Show all sites hierarchically with custom font/indent
- Pages Navigation
Page font, size, indent, and opacity settings
- Responsive
Separate settings for desktop and mobile
- Nested Pages
Pages can have child pages (subpages)
- Drag to Reparent
Drag pages onto others to nest them
- Collapsible
Collapse parent pages to save space
- Smart URLs
URLs follow hierarchy: /parent/child/
- Subpage Grid
Section type to display child pages automatically
- Internal Pages
Mark pages as internal drafts, hidden from the live site
- Quick Publish
Upload a single page in about 10 seconds
- Page Preview
Preview a single page with unpublished changes (links disabled)
- Preview Site
Fully browsable preview of the entire site including internal content
- View Site Link
Click "View Site" in the success message to see your changes
- Shared Assets
Sync CSS, fonts, and logos separately
- Apply Styles
Update styles without republishing pages
- Thumbnails
Automatically generated preview images
- Clean Up Stale Pages
Archive orphaned folders after moving/renaming pages
- Image Optimization
Images auto-optimized in background with WebP variants
- Publish All Sites
Publish all sites at once; internal sites are automatically removed
- Internal Pages
Mark pages as drafts — editable but excluded from the live site
- Internal Sites
Mark entire sites as internal — hidden from all live navigation
- Status Badges
Published (green), Unpublished (grey), or Internal (amber) on all cards
- Server Cleanup
Publishing an internal site permanently removes it from Cyon
- Smart Publish Button
Button adapts: "Remove from Server" or "Publish Site"
- Publish All
All Sites page button handles internal sites automatically
- Preview Site Button
Available in the sidebar, All Sites page, Pages overview, and Site Information pages
- Full Navigation
All menu and footer links work — browse like the live site
- Internal Content
Internal pages and sites appear in navigation
- Preview Indicator
Small floating pill in the corner shows you're in preview
- Login Protected
Only accessible when logged into the editor
- Deep Linking
Bookmark any preview URL — login redirects you back automatically
- All Images View
See all images across sites in one place
- Site Filtering
Filter images by site with badge buttons
- Upload Images
Upload directly from the editor to Dropbox
- Thumbnail Slider
Adjust grid size from 1-5 columns
- Optimization Status
See pending and optimized counts
- Lightbox Preview
Click any image for fullscreen view
- Files Page
Manage downloadable files (PDFs, ZIPs, etc.) across all sites
- Upload & Rescan
Upload files or detect new files added via Dropbox
- File Download Section
New section type to display a list of downloadable files
- File Picker
Search and select files when editing a File Download section
- Smart Deployment
Only files referenced in published sections are uploaded to Cyon
- Auto Cleanup
Unreferenced files are removed from the server during publishing
- Product Section
Search and connect Stripe products by name — price and currency sync automatically
- Cart Page
Dedicated cart page with thumbnails from Stripe, quantity controls, stock limits, and checkout
- Inventory Tracking
Real-time stock display on product pages; prevents over-adding; auto-disables when sold out
- Stripe Checkout
Secure hosted checkout via Stripe — supports cards, Twint, and more
- Product Grid
Display products from all subpage levels with item limit, sort order, and filter options
- Auto-Sold
Stock decremented via webhook on purchase; products auto-marked sold at zero
- Cart Thumbnails
Product images from Stripe displayed in the cart; items link back to product pages
- Test/Live Mode
Toggle between Stripe test and live modes in Settings > Connections > Shop
- Create Cart Page
One-click cart page creation in Shop settings with pre-configured Cart section
- Cart Styling
Desktop/mobile styling for padding, item images, and checkout button in Global Settings > Styling > Cart
- Global Toggle
One switch in Global Settings > General to show a placeholder page
- Custom Text
Editable headline and description for the construction page
- Sidebar Indicator
Amber banner in the sidebar when under construction is active
- Preview Works
Editor preview and images continue to load normally
- Publish Behind
Keep publishing content — it updates behind the scenes
- Instant Toggle
Turning the switch off immediately restores the live site
Frequently Asked Questions
About
Built by Studio Jan Henrik Hansen
Creating tools for beautiful websites
Idea
Jan Henrik Hansen
Design & Execution
Armin Seltz
Code
Claude Opus 4.5