Save and load GrapesJS projects in a database with remote storage

/**
 * Project storage API for GrapesJS's `remote` storage, backed by Postgres.
 *
 *   GET  /api/projects/:id  → 200 { data } or 404
 *   POST /api/projects/:id  ← { data, html, css }  → 200 { ok: true, updatedAt }
 *
 * `db` is anything with a node-postgres style `query(text, params)` that resolves to
 * `{ rows }` — `pg.Pool` in production; the verifier passes PGlite, which is Postgres
 * compiled to WebAssembly, so the SQL below is exercised as written.
 */

export const SCHEMA = `
  CREATE TABLE IF NOT EXISTS projects (
    id         text PRIMARY KEY,
    data       jsonb NOT NULL,
    html       text NOT NULL DEFAULT '',
    css        text NOT NULL DEFAULT '',
    updated_at timestamptz NOT NULL DEFAULT now()
  )
`;

const MAX_BODY_BYTES = 5 * 1024 * 1024;
const PROJECT_PATH = /^\/api\/projects\/([a-z0-9-]{1,64})$/;

function sendJson(res, status, body) {
  res.writeHead(status, { 'content-type': 'application/json; charset=utf-8' });
  res.end(JSON.stringify(body));
}

async function readJson(req) {
  const chunks = [];
  let size = 0;
  for await (const chunk of req) {
    size += chunk.length;
    if (size > MAX_BODY_BYTES) throw Object.assign(new Error('Project too large'), { status: 413 });
    chunks.push(chunk);
  }
  try {
    return JSON.parse(Buffer.concat(chunks).toString('utf8'));
  } catch {
    throw Object.assign(new Error('Body is not valid JSON'), { status: 400 });
  }
}

/** Returns true when it handled the request, so it can sit in front of other routes. */
export function createProjectRoutes(db) {
  return async function handleProjects(req, res) {
    const match = PROJECT_PATH.exec(new URL(req.url ?? '/', 'http://local').pathname);
    if (!match) return false;
    const id = match[1];

    // Add your own authentication and per-project authorisation here, before any query.

    try {
      if (req.method === 'GET') {
        const { rows } = await db.query('SELECT data FROM projects WHERE id = $1', [id]);
        if (!rows.length) sendJson(res, 404, { error: 'Project not found' });
        else sendJson(res, 200, { data: rows[0].data });
        return true;
      }

      if (req.method === 'POST') {
        // GrapesJS's remote storage always sends this header; a plain cross-site form cannot.
        if (req.headers['x-requested-with'] !== 'XMLHttpRequest') {
          sendJson(res, 403, { error: 'Missing X-Requested-With header' });
          return true;
        }
        const body = await readJson(req);
        const data = body?.data;
        if (typeof data !== 'object' || data === null || !Array.isArray(data.pages)) {
          sendJson(res, 400, { error: 'Expected { data: { pages: [...] } }' });
          return true;
        }
        const html = typeof body.html === 'string' ? body.html : '';
        const css = typeof body.css === 'string' ? body.css : '';
        const { rows } = await db.query(
          `INSERT INTO projects (id, data, html, css, updated_at)
           VALUES ($1, $2, $3, $4, now())
           ON CONFLICT (id) DO UPDATE
             SET data = EXCLUDED.data, html = EXCLUDED.html, css = EXCLUDED.css, updated_at = now()
           RETURNING updated_at`,
          [id, JSON.stringify(data), html, css],
        );
        sendJson(res, 200, { ok: true, updatedAt: rows[0].updated_at });
        return true;
      }

      res.writeHead(405, { allow: 'GET, POST' }).end();
      return true;
    } catch (error) {
      const status = error.status ?? 500;
      if (status === 500) console.error('project storage failed', { id, error });
      sendJson(res, status, { error: status === 500 ? 'Storage failed' : error.message });
      return true;
    }
  };
}

import grapesjs, { type Editor } from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';

const projectId = new URLSearchParams(location.search).get('project') ?? 'demo';
const endpoint = `/api/projects/${encodeURIComponent(projectId)}`;
const status = document.getElementById('status');

const editor: Editor = grapesjs.init({
  container: '#gjs',
  height: 'calc(100vh - 32px)',
  storageManager: {
    type: 'remote',
    autosave: true,
    autoload: true,
    stepsBeforeSave: 1,
    options: {
      remote: {
        urlLoad: endpoint,
        urlStore: endpoint,
        // Send the rendered HTML and CSS alongside the project JSON, so the public page
        // can be served from the database without running the editor.
        onStore: (data, editorInstance) => ({
          data,
          html: editorInstance.getHtml(),
          css: editorInstance.getCss() ?? '',
        }),
        // The API wraps the project as { data }; hand GrapesJS the project itself.
        onLoad: (result) => result.data,
      },
    },
  },
});

editor.on('storage:start:store', () => {
  if (status) status.textContent = 'Saving…';
});
editor.on('storage:end:store', () => {
  if (status) status.textContent = 'Saved';
});
editor.on('storage:error', (error, type) => {
  if (status) status.textContent = `Could not ${type} the project`;
  console.warn('storage error', type, error);
});

// Exposed for the test harness and for poking at the editor from devtools.
Object.assign(window, { editor });