Laptop showing a web browser

Step 1

Connect to your website

First we need to connect to your website using FTP, FTPS, SFTP, or Amazon S3. 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, ASP, and ColdFusion!

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 -->
</div>

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…


See what you can do once you've integrated your website with Surreal CMS.

Visual Editing

Imagine opening your website in a browser, clicking the page, and editing it. That’s exactly how our editor works, and it’s a fantastic experience!

More about visual editing

Drafts & Revisions

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

More about revisions

Analytics

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

More about analytics

Includes

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

More about includes

Blocks

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

Repeatables

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

More about repeatables

Signup and try the demo!