The user guide is designed to get you up and running quickly. It is recommended that you review the quick start section in detail and come back to the subsequent section as needed depending on your project.

Current Project Status

SonicJs is currently in early beta. While you could certainly use it to run a production website (sonicjs.com runs in the latest version), please be aware that there could be upcoming breaking changes that would cause you to have to rework parts of your site.

However, due to the simplicity of the data model, it is not anticipated that there would be any kind of major change that would force you to have to start over with the latest version and re-add your content.

If you have any questions about the current status, or would like know if we think your project would be a good fit for SonicJs, please don't hesitate to contact us. We make every attempt to get back to interested users within 24 hours if not much sooner.

Quick Start

Assuming that your website is up and running locally, let's dive into the awesomeness of SonicJs. Here is what we're going to do:

  • Create our admin user
  • Login
  • Become familiar with the admin UI
  • Create a page
  • Create a menu item
  • Add some content to your page

Create Admin User

Visit http://localhost:3018/

This should display the admin user registration form.

Enter your admin email and password and click "Register"

Create Admin User

Now, login with the admin email/password.

You should now now be able to access the admin panel:


Also, notice that when you go back to your site, you will now see the admin tool bar on the left side of the screen.

The Admin UI

Now that you can access the admin panel:


Click thru the various menu items on the left nav to explore the various options.

Create a Page

Let's create our first page!

  1. From the admin UI, click "Content"
  2. Click the "Add Content" button
  3. Click "Page"
  4. In the title field, enter "My Page" and click "Submit"

We'll add some content to your new page in a minute, but first let's add a menu item so that you can access your new page.

Create a Menu Item

  1. From the admin UI, click "Menus"
  2. Click the "Edit" button in the "Main" row
  3. Click "Add Another"
  4. Enter: Url: "/my-page"
  5. Enter: Title "My Page"
  6. Click "Submit"

Visit http://localhost:3018/

You should now see your new menu item in the main top nav. Click on it to visit our new page. It's blank, but we'll take care of that in the next step.

Add a Layout to the Page

SonicJs allows you to manage your layout and content on the fly. So first we'll create a simple 2 column layout, then add some content in both columns.

  1. From the page builder UI on the left, click "Add Section"
  2. Click "empty column" to select the column
  3. Click Row -> Add Column, this will add a second column
  4. Click "Section 1", then "Edit"
  5. You will see the data structure for the page. You'll see 2 "class": "col"
  6. In the first one, change "col" to "col-md-3"
  7. In the second one, change "col" to "col-md-9"

Add Content to your Page

  1. Click the first "empty column" to select the column
  2. Select Module -> Title
  3. Enter "Hello SonicJs!" for the title, then click "Submit"
  4. Experiment with adding other modules to your columns following the steps above.

That's it! You now know your way around SonicJs. However, to understand the real power of SonicJs, you need to go thru the process of of managing your own custom content types, creating a custom module, etc. 

Check out the below sections to take a deeper dive.


Modules are components used to extend SonicJs. Modules are very powerful in SonicJs due to their ability to modify core functionality and the functionality of other modules. 

Most CMS, even highly priced commercial systems, treat modules as "bolt-ons" meaning that they sit on top of your CMS add can add functionality. Of coarse they also have the ability to perform basic operations via an API, but they are almost always very limited in their ability to modify the core functionality of the CMS. Mover-over, a modules ability to extend another module is typically non-existent or very limited.

SonicJs is different. SonicJs was built from the ground up to construct a light-weight core with many integration points, allowing modules to tweak and override very specific system functions as well as functions built in other system. See the module section in the developer docs for more info.