Introducing BodilessJS

Johnson & Johnson IT is excited to announce the release of BodilessJS: a new open-source toolkit for building editable websites on the JAMStack, using React and Gatsby.

BodilessJS is based on the idea that, for many sites, a full-blown CMS is unnecessary overhead and introduces more problems than it solves, including:

• Complex workflows, especially when changes to “content” and “presentation” are linked
• Complex editorial interfaces, especially when “presentation” is treated as “content”
• Increased security vulnerabilities
• Higher hosting, maintenance, and operational costs

CMS’s are great for some use-cases — for example when there is a lot of content reuse across channels, where content is highly relational, or where presentation is highly standardized and templated. However, for most other use-cases, CMS’s are simply overkill (a point of view which BodilessJS shares with a related new project: TinaCMS).

What is it?

JAMStack sites tend to fall into two categories:

• “Headless” implementations, where content is managed in a CMS and pulled into the site at build time,
• “Bodiless” implementations, where content is managed alongside the code in the repository (often in markdown files).

As you might expect, BodilessJS follows the latter pattern. At its heart, it is a set of components which know how to provide their own edit interfaces. When you build a Bodiless website, you compose these into larger components and, ultimately, pages. The result is a website which is natively editable in-place — there is no separate editorial interface to integrate with your site. Instead, your site is built out of editable pieces.

Each BodilessJS component controls the structure of its content — whether that be text, images, layout, API configuration, or anything else. The BodilessJS framework (a Gatsby theme) then handles serializing or deserializing the content to/from JSON files locally or in a cloud edit environment, as well as pushing/pulling from an upstream Git repository. Thus, all changes to your website go through a single, unified workflow, are easy to deploy, revert, merge and trace — all thanks to the power of Git.

Due to its component-based architecture, BodilessJS also lends itself very easily to the implementation of design systems. We’re big fans of Atomic CSS, and so BodilessJS includes a Design API which facilitates building design systems with this philosophy.

BodilessJS is being developed at J&J to meet specific use-cases in the consumer marketing space. The design and architecture are based on learnings from many years of experience trying to build and operate a large-scale Drupal 7 platform to support hundreds of customer-facing sites. Head on over to our GitHub project to read more about the core principles which came from that experience and underlie BodilessJS.

Or just clone the repository and get started building sites!