Laptop showing a web browser

Step 1

Connect to your website

First we need to connect to your website using FTP, FTPS, SFTP, or any Amazon S3 compatible endpoint. When you make changes and upload files, we’ll publish everything back to your server instantly.

You control your content. We don’t try to lock you in by storing your files in other places. You own everything.

Step 2

Enable pages

Now that you’re connected, we’ll show you a list of files on your server. Just click the pages you want to edit and they’ll appear like magic in the CMS.

You can even enable pages that contain server-side code such as PHP.

Clipboard with a checklist
Web browser showing HTML code

Step 3

Define content regions

The last thing we need to know is what parts of the page you want to edit. To do this, add an id and a special class

<div id="content" class="cms-editable">
  <!-- Everything inside is editable -->

You can make just about anything editable, and you’ll only be able to change what's inside the elements you've tagged.

Tip: you can also define content regions before connecting your website! Some apps, such as Blocs, have this built-in for convenience.

Start editing

Congratulations, your website is ready to edit! Now you can make changes anytime and invite your clients to do the same. It’s almost like magic.

Did I mention that our editor is incredible? Just click on your webpage and type. When you’re done, hit publish. It’s that easy.

Now that you’ve got the basics down, feel free to check out the docs to discover more features and integration techniques.

Laptop with a magic wand being waved

Once you’re connected…

Here's just some of what you can do once you're up and running with Surreal CMS.

Visual Editing

Open your website in a browser, click on the page, and edit it. It's so easy, most clients can use it without any training at all.

More about visual editing

Drafts & Revisions

Save your work and pick up later where you left off, or open a previous version for editing. You won’t lose your content — not even by overwriting it.

More about revisions


Link your Google Analytics account and we’ll display your traffic in a simple dashboard that even clients can understand.

More about analytics


Make changes on one page and we’ll update all your other pages automatically. Super handy for headers, footers, and other shared content.

More about includes


Insert predefined blocks of HTML into your pages with a couple clicks. Blocks are an easy way to add structured content to any page.

More about blocks


Enhance content by making things repeatable for easier adding/removing/reordering. You can even toggle editing for individual elements.

More about repeatables

Try it out!