Live previews

You can set up a live preview of your website inside the dashboard. Previews are implemented as a React component. It does not mean React is required for developing your project.

A basic preview

In the config file (alinea.config.tsx) you can define a preview component on your current workspace that simply renders the title field and nothing else. The Preview wrapper makes sure the title is displayed inside a resizable pane, but it is strictly not required if you'd like to get creative.

import {Preview} from 'alinea'
workspace('My workspace', {
  // ... workspace options
  preview({entry}) {
    return (
      <Preview>
        <h1>{entry.title}</h1>
      </Preview>
    )
  }
})

Rendering externally

The BrowserPreview component can be used to preview external sources by rendering an iframe. This can be useful to take full advantage of web frameworks that expose their own server with a dev command (or similar).

A preview token is provided to securely pass context to the preview route, it can later be used to find out which entry we're viewing so it can retrieve the correct draft. Setting up the api route will be very specific to the way your project is built and we'll revise this section later with sample guides for a handful of frameworks.

import {BrowserPreview} from 'alinea'
workspace('My workspace', {
  // ... workspace options
  preview({previewToken}) {
    return (
      <BrowserPreview
        url={`http://localhost:3000/api/preview?${previewToken}`}
      />
    )
  }
})

Reacting to content changes

By default Alinea will reload the iframe source when content changes, after a certain delay. If your framework has ways to refetch content without a full page reload those can be used instead. A utility function is provided in @alinea/preview to register a listener.

import {registerPreview} from 'alinea/preview'
registerPreview({
  refetch() {
    // Reload server data
  }
})