Getting started

Plain HTML

Read content with fetch from any page or server, and make the page editable in the canvas with one script tag, without a build step.

1 min read

The delivery API is plain HTTPS and JSON, so any language or framework can read it. This page uses fetch and the bridge's script tag.

Read a page

const response = await fetch(
	'https://content.obelism.studio/api/delivery/v1/pages?path=home',
	{ headers: { Authorization: `Bearer ${CONTENT_DELIVERY_TOKEN}` } },
)
const { entry } = await response.json()

entry.fields holds every field of the page's content type; see the delivery API for the shape, the other endpoints and the parameters.

CORS is open, so a browser may call it with a delivery token, which only sees published content. Keep preview tokens on a server: they see drafts.

Make it editable

Include the bridge on every page:

<script src="https://content.obelism.studio/bridge.js"></script>

and mark each block with its _uid:

<section data-cms-uid="b_…">…</section>

In the canvas, clicking a block of the selected page selects it. Without an update listener the page reloads after each save; with one, it shows edits as they are typed:

<script>
	ObelismBridge.on('update', ({ entry }) => render(entry))
</script>

Inside the editor the page is loaded with ?cms_preview=1&cms_token=…. On your server, fetch with cms_token as the bearer token then, with your space's id in Obelism-Space and the environment in Obelism-Environment: it is made for the person editing and reads drafts. A made-up or expired one, or one for another space, gets a 401, so fall back to your delivery token. Never show drafts because of cms_preview alone: anyone can add it to a URL.

See the canvas for the rest.

On this page

Marks in the margin

  • Note
  • Watch out
  • Updated

Scribes marked doubtful lines in the margin. That practice is called obelism.

Stuck on a step?