GrapesJS temp.md plugin

Publish a GrapesJS project as a temporary, updateable public preview on temp.md.

• One explicit Share action; nothing uploads automatically.
• No temp.md account or API key required.
• Multi-page projects become static HTML files with their GrapesJS CSS and component JavaScript.
• Repeated publishes in the same browser tab update the same URL.
• Interrupted uploads resume safely.
• Revoke the preview from GrapesJS when the review is over.

Previews are public to anyone with the unlisted URL and normally expire seven days after their latest successful update.

Install

npm install grapesjs github:tempmd/grapesjs-plugin-tempmd

import grapesjs from 'grapesjs';
import tempmdPlugin from 'grapesjs-plugin-tempmd';

const editor = grapesjs.init({
  container: '#gjs',
  plugins: [tempmdPlugin],
  pluginsOpts: {
    [tempmdPlugin]: {
      title: 'Homepage review',
    },
  },
});

The plugin registers these commands:

await editor.runCommand('tempmd:publish'); // create or update
await editor.runCommand('tempmd:revoke');  // remove the public preview
await editor.runCommand('tempmd:forget');  // forget local authority without revoking

Browser script

After the package is released to npm, it can also be loaded directly from a CDN:

<script src="https://unpkg.com/grapesjs"></script>
<script src="https://unpkg.com/grapesjs-plugin-tempmd"></script>
<script>
  const tempmdPlugin = window['grapesjs-plugin-tempmd'].default;
  grapesjs.init({
    container: '#gjs',
    plugins: [tempmdPlugin],
  });
</script>

Options

Option	Default	Purpose
addButton	true	Add the Share button
panelId	options	GrapesJS panel receiving the button
buttonLabel	Share	Button label
title	—	String or callback used as the preview title
spaMode	false	Serve missing paths through index.html
pagePath	—	Override generated paths for project pages
buildFiles	—	Replace the complete generated file bundle
stateStore	tab-scoped sessionStorage	Store secret update capability state
storageKey	current pathname	Scope the default state store
confirmPublish	built-in modal	Replace the explicit upload confirmation
openAfterPublish	false	Open the result in a new tab

Include custom assets

GrapesJS commonly stores images as external URLs or data URLs, which continue to work in the generated preview. If your host keeps assets elsewhere, supply the exact bundle:

pluginsOpts: {
  [tempmdPlugin]: {
    buildFiles: async (editor) => [
      ...buildProjectFiles(editor),
      { path: 'assets/logo.svg', content: logoSvg, contentType: 'image/svg+xml' },
    ],
  },
}

Capability storage

The update token is a secret: it can change or revoke the preview. The plugin never puts it in URLs, events, logs, or public command results.

The default store uses sessionStorage, scoped to the current pathname. Production hosts with multiple projects at one route should provide a project-specific storageKey or a protected stateStore:

{
  storageKey: `tempmd:project:${project.id}`,
}

Events

The plugin emits public, capability-free events:

• tempmd:publish:start
• tempmd:publish:success
• tempmd:publish:error
• tempmd:revoke:success
• tempmd:forget

Development

npm install
npm test
npm run typecheck
npm run build
npm start

License

MIT