back home

Keystone Content Authoring Experience is Just Fantastic!

Sep 05, 2022

Not all heroes wear a cape. Some write blog posts.

Heyo! Keystone comes built-in with a powerful Rich Text Editor and it makes it easy to draft your thoughts visually and publish it with a pizazz.

Plenty of built-in formatting options. You can write something in bold. And italics too. You can underline a few words. How about strikethrough? You got it. Don't forget about inline code, you got that too. <div>Hello world!</div>.

Heading 1 through 6

Heading 1

Heading 2

Heading 3

Heading 4

Every line is a paragraph. Paragraphs can be single or multi-line.

Layouts

You can have any percentage-based grid layout you want. Keystone lets you customise the available column layouts in your editor. How cool is that?! 😎

This is a 2-equally-split-columns layout —

<div>Hello, beautiful world!</div>

Most code examples somehow always include a variation of the words Hello World.

<div>Oh, hi there!</div>

You can write some other comparative content in the right section to make comparison easy for your readers.

This is a 3-equally-split-columns layout —

What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Where does it come from?

Contrary to popular belief, Lorem Ipsum has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.

Blockquote

Hey you! This is a blockquote.

Code blocks

/* 
  You can write default codeblocks that aren't syntax highlighted. 
  Scroll down for a custom code block example with syntax highlighting.
*/

function Greet() {
  return <div>Hello world!</div>
}

Divider

Ordered lists

Three crazy facts about Australia:

  1. If you visit one new beach in Australia every day, it would take over 27 years to see them all.
  2. Australia has three times more sheep than people.
  3. An Australian man once tried to sell New Zealand on eBay.

Unordered lists

Three more crazy facts about Australia:

  • 80% of the animals are unique to Australia
  • 90% of Australians live on the coast
  • The Australian Alps get more snow than the Swiss Alps

Custom components are amaaaaaazing 🤯

You can build your own custom components for the Keystone's document field and use them in the Rich Text Editor while authoring content. You have complete control over how your custom components are authored in the editor and how you render them on your website.

When it comes to what you can do with custom components, your imagination is your only limit. Here are a few example custom components I've created —

This is a callout component. You can write something here to draw your user's attention to a specific piece of content. 🥳

This is a custom blockquote. It looks cooler than the default blockquote.

— Captain Napkins
/* 
  This is a custom codeblock with jsx syntax.
  This is used with prismjs for syntax highlighting.
*/

function Greet() {
  return <div>Hello world</div>
}
<!-- Another custom code block with html syntax highlighting -—>

<header>
  <h1>Hello world</h1>
</header>

A custom component to embed tweets —

Another component to embed YouTube videos —

And of course, a Hero image for your blog post —

You can write whatever caption you want for your image. Or choose to not have a caption.

That's all folks. Hope you enjoy your content authoring experience with Keystone. Say hi to me on Twitter — @flexdinesh.