Skip to content

NodeHive Visual Editor

NodeHive comes with a visual editor which helps content editors work with content directly from the frontend. To enable the visual editor, the frontend code needs to communicate with NodeHive.

How to configure NodeHive Visual Editor

WIP documentation

  1. Copy the full /nodehive folder from* to [yourapp]/app/nodehive/*
  2. <Connector> component should be added to the global layout.tsx
  3. Copy to [YOURAPP]/app/api/nodehive/revalidate/route.ts
  4. Copy to [YOURAPP]/app/nodehive/login/page.tsx should exist
  5. Wrap all editable components with the respective wrapper components
  6. Configure form

Reference implementation

The best way to strat is using the reference implementation.

Consult to see how visual editor components are used.

Configure SSL on localhost

mkcert -install
mkcert localhost
npm install -g local-ssl-proxy
local-ssl-proxy --source 3010 --target 3000 --cert localhost.pem --key localhost-key.pem

Prevent ssl errors (use only for development)

Add the following line to .env file