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.
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.