Adding a CMS anywhere
Tags: cms, javascript, webdev, showdev
Published: 2018-01-18 01:51:16

---
title: Adding a CMS anywhere
published: true
description: Easily add CMS features anywhere, on any website
tags: CMS, javascript, webdev, showdev
cover_image: https://res.cloudinary.com/component/image/upload/v1516240635/anywhere-cms_1000x420_exnqgp.png
---

Content Management Systems are great for making edits to text and images, but they usually come at a cost: **You have to build your website on the CMS platform**.

That means if you're using WordPress, Drupal, or Joomla, you're writing PHP and you're on their platform for good.  If you use Ghost, Squarespace, or others, you are similarly locked into designing, planning, and scaling using their tech stack.

In this post, we'll enable you to **use any tools you want** to add a fast, SEO-friendly CMS that works on any website, on any platform.

<hr>

### About Anymod

Anymod is a tool that lets us add CMS functionality wherever we want by adding `<section>` tags to our HTML.  These tags are then converted into editable content by the browser.

For example, this code:

```HTML
<section id=anymod-klaln data-load=b></section>
```

loads the following content:

![Corgi](https://res.cloudinary.com/component/image/upload/v1516237079/corgi.png)

You can see it in action here: [https://anymod.com/mod/preview?key=klaln](https://anymod.com/mod/preview?key=klaln)

This content has some nice features:
* It gets delivered **fast** and indexed by Google
* The text and images are easily editable by developers, teams, or clients
* The HTML, CSS, and JavaScript are fully customizable

Once a section is added to your HTML, authorized editors on your team see a pencil icon when viewing your web page. Clicking the pencil allows them to make edits directly from the page.

![Pencil icon](https://res.cloudinary.com/component/image/upload/v1516237049/pencil.png)
![Content editor](https://res.cloudinary.com/component/image/upload/v1516237039/on-page-editor.png)

With this setup in place, edits are simple, and you don't have to redeploy code for **every. single. change.**  That means a faster, more robust workflow.

Next, let's add a working section and customize its content and code.

<hr>

### Adding a section

Visit the demo section [here](https://anymod.com/mod/preview?key=klaln) and click "**Fork**" at the top right to create your own section to work from.
![Fork a section](https://res.cloudinary.com/component/image/upload/v1516237195/Fork_k2r499.png)

Now copy the section tag and Anymod script at the bottom of the page and paste them into your project.  Add the `<section>` tag wherever you want the section to show, and add the `<script>` tag at the bottom of your page, just before the closing `</body>` tag.

![Fork a section](https://res.cloudinary.com/component/image/upload/v1516237263/Copied_ec3ets.png)

When you reload your web page, your section should appear on the page automatically.

<hr>

### Editing content

From your own page, you can edit content by clicking the pencil on the right side of the page and then choosing which section to edit by clicking on it.

You can also edit content & code in the Anymod dashboard, which is what we'll do here.

To edit content in the dashboard, click the "**Content**" tab at the top of the page.  From here, you can manage the section's text & images.  

Try editing some text, then click "**Publish**" when you are finished.

![Editing content](https://res.cloudinary.com/component/image/upload/v1516237275/Edited_content_uxkyzv.png)

<hr>

### Customize CSS

We can style our section however we want using CSS rules that get scoped to apply only to this section.  To see this in action, click on the "**Code**" tab at the top to open the code editor, then add a CSS rule that blurs our image on hover:

```CSS
img:hover {
  -webkit-filter: blur(5px) saturate(6);
  filter: blur(5px) saturate(6);  
}
```

![Code editor](https://res.cloudinary.com/component/image/upload/v1516237279/Edited_CSS_h2iaia.png)

Now whenever a visitor hovers over our image, it will blur.

![Hover blur](https://res.cloudinary.com/component/image/upload/v1516237348/Hover_image_eectni.png)

Note that this CSS rule only applies to this section; it will not affect anything else on our page.

You can continue adding CSS (or SCSS) rules to the section to style it exactly the way you want.

<hr>

### Customize HTML

Let's add a heading at the top of the card that's also editable.  To do this, we'll create a new content field and then add it to our section's HTML.

Click the "**Settings**" tab at the top, then use the form to add a plain text field called `title`.  Click "**Add field**" to add the field.

![New field](https://res.cloudinary.com/component/image/upload/v1516237360/Add_field_rhtjhq.png)

Now click on the "**Content**" tab again and see that the `title` field was added.  Enter a message like `Hello, World!` into this field and click "**Publish**".

![Field added](https://res.cloudinary.com/component/image/upload/v1516237366/Edit_field_yppiwp.png)

Now we can insert this content into our section.  Click the "**Code**" tab at the top to go back to the code editor.

Anymod uses [Vue.js syntax](http://vuejs.org/v2/guide/syntax.html) to insert content.  That means if we have a field named `title` (which we do), we can insert it into an `<h2>` element like this:

```html
<h2 v-text="title"></h2>
```

Let's use this approach and update the section's HTML to include our new `title` field:

```html
<div class="card" @click="bark">
  <div class="card-block">
    <h2 v-text="title" class="card-title"></h2>
    <hr>
    <div v-html="content"></div>
  </div>
</div>
```

Saving this will update our preview, and we can now see that our new `Hello, World!` content is being inserted:

![HTML Edited](https://res.cloudinary.com/component/image/upload/v1516237543/Edited_HTML_dd2dkt.png)

You can continue to add fields and edit the HTML to suit your needs.

<hr>

### Custom JavaScript

Now let's make our section interactive.  We'll set it up so that the card starts out small and then expands when we click it.

To do this let's use a variable called `isCompact` to determine whether or not the card should be "compact".

Under the hood, each Anymod component is a [Vue.js instance](https://vuejs.org/v2/guide/instance.html), so all the methods available in a Vue.js instance are available to us by accessing the `component` object in our section.

For example, we can set a variable called `isCompact` through the `component.data` object in our JavaScript:

```js
component.data.isCompact = true
```

We can further add a method to `component.methods` that will toggle the `isCompact` variable when called:

```js
component.data.isCompact = true

component.methods = {
  bark: function () {
    console.log('woof')
    component.data.isCompact = !component.data.isCompact
  }
}
```

In our HTML, this `bark` method is already called whenever the card is clicked because of the `@click="bark"` attribute that was already there.

We can also add `:class="{ compact: isCompact }"` to set the `.compact` class on our `card-block` element whenever `isCompact` is true:

```HTML
<div class="card" @click="bark">
  <div class="card-block" :class="{ compact: isCompact }">
    <h2 v-text="title" class="card-title"></h2>
    <hr>
    <div v-html="content"></div>
  </div>
</div>
```

Now all that's left is to define some CSS rules that make our `card-block` element small when the `compact` class is added and large when it isn't:

```CSS
.card-block {
  cursor: pointer;
  overflow: hidden;
  transition: max-height 0.5s;
  max-height: 1200px;
}
.compact {
  max-height: 200px;	
}
```

Our updated section is now interactive.  It starts out compact and then expands when clicked.

![Updated section](https://res.cloudinary.com/component/image/upload/v1516237766/After_edits_sp5sk1.png)

<hr>

### Pulling it all together

You can see the final code for this post [here](https://anymod.com/mod/code?key=okaak). If you want to compare the before and after, here they are:

- Before: https://anymod.com/mod/preview?key=klaln
- After: https://anymod.com/mod/code?key=okaak

Feel free to fork either one into your own project and start using it!

<hr>

Now you can add CMS features anywhere on your site, customize them, and set up your team and clients to maintain the content on their own.  It's completely customizable and very easy to get going.

You get the benefits of a "normal" CMS, but you can choose whatever technology you like.

Anymod works well with all the popular frameworks, both front end and back end, and you can find nice examples for [React](https://guide.anymod.com/v1/usage/react.html), [Angular](https://guide.anymod.com/v1/usage/angular-2.html), [Vue](https://guide.anymod.com/v1/usage/vue.html), and [Bootstrap](https://guide.anymod.com/v1/usage/bootstrap.html) in the guide.

If you come up with some cool sections, feel free to share them with others! ✌️