Recently I've been exploring possible upgrades that I can make to the various projects that I work on and one area where they are all lacking is content management. Although I am the primary person that manages the content on my sites it would be great if others could do so as well. Hence, CMS.
Most of these existing projects use MDX files for managing content which, if you're unfamiliar with Git can be a huge hurdle to jump when you just want to make a few corrections. To fix this I implemented KeystoneJS. A content management platform made by Thinkmill in Sydney, Australia.
With keystone running in the embedded mode it's the perfect companion for smaller NextJS projects as it doesn't need to be run on a remote machine and instead is able to work with an SQLite database locally. On the other hand, if you want to host the CMS yourself it's much the same procedure.
The entire project is statically typed making it extremely easy to explore and understand without having to have knowledge of the underlying codebase or massive amounts of documentation.
That being said the documentation for Keystone's latest version (6 at the time of writing) is well done exploring how you can create custom schemas or even customize the CMS' admin UI.
The best part however is the rich document editing system the CMS uses. Build on Slate editor makes for an awesome editing experience where the user is able to choose how the content looks in both the front-end and backend of the application. In addition, it also has integration for custom components so that I can build React UI elements that are customizable in the editor as well as visible on the front-end.
Examples of this can be found on my Github under this website's repository.
All in all, KeystoneJS is a great CMS not only because of its rapidly evolving feature set but also the awesome team behind it.
This code highlighting component was built using this code. ￬
```typescript
code: component({ component: ({ content, language }) => { return ( <NotEditable> <SyntaxHighlighter language={language.value} style={atomOneDark}> {content.value} </SyntaxHighlighter> </NotEditable> ); }, label: "Code", props: { content: textarea({ label: "Code", defaultValue: "console.log('Hello World!');", }), language: fields.text({ defaultValue: "javascript", label: "Language" }), }, chromeless: false, }),
```