The installation is fast and simple. Just download jocms, unpack the zip folder and upload it into the root directory of your site. The folder "jocms" has to be located necessarily in the root directory.


After that start the installer under You will be guided through some settings. When the installation is done you can log in and get to the programs main page, which you can check out in the Online-Demo too.

Set up your site

When opening the program for the first time, you will not see any option for editing. First, you have to tell jocms which areas the user is allowed to edit. Inside those areas, the content can be altered by you or your customers. But only inside! It is not possible to modify content outside. By the way, one page can have multiple editable areas.

Select editable areas online The easiest way for setting the editable areas is to use the editor for editable areas. For this click on "select editable areas" in the options menu. With the help of this editor, you can select the editable areas easily by clicking. One click selects the editable element. A second click moves the selection to the next larger area. When all areas are set, you can save the selection and you are ready to edit. If you want to delete some areas, check the checkmark "delete area" and remove the unwanted element. The choice of editable areas can be modified any time.

Set editable areas in source code

Advanced users can set the editable elements in the source code too. To turn an element editable, you have add the attribute data-jo="true". Everything that is inside this element can be edited with jocms later. Here is an example:

<div data-jo="true">
  <p> You can edit this text. </ p>
  <img src="image.png" alt="You can edit this image too."/>

Be carefull not to produce nested editable areas. Moreover should those areas only contain valid HTML.

First steps

Edit page

When all areas are chosen a button for editing appears. Now you have multiple tools for editing your contents. The apperance of your elements is defined by your stylesheet. If you tell in your stylesheet all <b>-elements to be red, jocms adapts this setting.

Text tools

Inside the menu, you have several tools. Just try them to get an overview of what is possible.


Images can be uploaded, inserted and edited comfortably. JPG, PNG and GIF formats are accepted. For adding an image, click on the image button in the toolbar. In the following window you can set a URL or choose one from your library. If you want to upload an image, click on the tab "upload". After the upload it will appear in your library.

Also images behave according to your css rules. Yet they can be edited too. Just click on the picture and all options will appear underneath.

Special elements

jocms supports some special features which will be extended in the future updates. Lets have a look at the data-jo="true"-attribute again: above we had said, data-jo makes elements editable but that is only a part of the truth.

data-jo="true" labels first of all those elements to be altered and saved by the editor. But they do not have to be editable necessarily. They are just a container for all jocms elements and actions, and only by default editable if not declared differently. The following elements explain this. A central role has the attribute data-jo-content. It labels special elements in jocms.

These elements are still in an experimantal state. If you have some problems or ideas please send me your feedback!

(Non-)editable elements

The attribute data-jo-content regulates whether an element is editable or not. It can have the values editable or noneditable. In the following example, the text is editable but not the image:

<div data-jo="true" data-jo-content="noneditable">
  <p data-jo-content="editable"> This test is editable. </ p>
   <img src="image.png" alt="This image is not editable."/>
  </ p>

It is important that data-jo="true" covers all jocms elements. noneditable and editable elements can be nested.

Repeated elements

Repeated elements have several applications e.g. in news sections (Demo). It allows the user to add, remove and sort  elements of your page. In order to user repeated elements, you should add the attribute data-jo-content="repeated" to your target. Inside this tagged container element there has to be another element wich is the one to be repeated.

<div data-jo="true" data-jo-content="repeated">
  <div>   <-- This element can be repeated
    <p data-jo-content="editable"> You can edit this Text. p>
  </ div>

At the moment it is not possible to directly set the repeated elements  editable. But child elements you can. The container elements tagged with data-jo-content="repeated" are noneditable by default so that you can use them also in editable areas.


Masks are predefined code snippets that the user can insert into editable areas. They are noneditable by default, but can contain editable or even data-jo-content="repeated" elements.

Masks can inserted from the mask panel in the editors toolbar and can be defined in the mask editor by the administrator. There you can edit the code and set an expressive name.

Further functions

Source code editor

The source code editor allows the administrator to edit the code of your page. It can be found in the options menu.


After saving a page jocms makes a snapshot of the current state. If something goes wrong you can reset the page in the options menu.

Manage users

Directly after the installation process, you are logged in as administrator. For customers thet should not have access to all tools and settings, a standard account is advisable. The standard account is only authorized to edit the pages but not to select the editable areas or change the settings. When setting up a new account, a standard password will be assigned which should be replaced immediately by the user whith a secure personal one.


You can manage jocms in the setting panel.


jocms is open source and for free. I put a lot of effort into creating this programm so that everbody can use it. If you like it please give something back by donating for this project.

if you have problems, questions or feedback please do not hesitate to send me a message!