Runable Website Runtime

0.0.14 verified Mon Apr 27 auth: no javascript

A Vite plugin for enabling website editing capabilities by augmenting the Vite dev server. Current stable version 0.0.14, released on an as-needed basis. Differentiates from other Vite plugins by focusing specifically on runtime editing features such as hot-reloadable content blocks and visual editing overlays. Ships TypeScript types and supports Vite 5, 6, and 7.

Common errors

error Error: Cannot find module 'runable-website-runtime' ↓

cause Package not installed or incorrect import path.

fix

Run npm install runable-website-runtime and ensure import uses correct casing.

error TypeError: RunableWebsiteRuntime is not a function ↓

cause CommonJS require used instead of ESM import.

fix

Use import { RunableWebsiteRuntime } from 'runable-website-runtime' instead of require.

Warnings

breaking Vite peer dependency requirement changed: version ^7.0.0 was added in v0.0.14, which may break setups pinned to Vite 4. ↓

fix Upgrade Vite to ^5.0.0 || ^6.0.0 || ^7.0.0.

gotcha Plugin must be used in development mode only; production builds may fail if the plugin is included. ↓

fix Conditionally apply plugin only when `command === 'serve'` in Vite config.

Install

npm install runable-website-runtime

yarn add runable-website-runtime

pnpm add runable-website-runtime

Imports

RunableWebsiteRuntime

wrong

const RunableWebsiteRuntime = require('runable-website-runtime')

correct

import { RunableWebsiteRuntime } from 'runable-website-runtime'

ESM-only; CommonJS require not supported. TypeScript types included.

default

wrong

import { default } from 'runable-website-runtime'

correct

import runablePlugin from 'runable-website-runtime'

Default export is also available; prefer named import for clarity.

Quickstart

Configures Vite with Runable plugin for editing capabilities using environment variable for API key.

// vite.config.ts
import { defineConfig } from 'vite';
import { RunableWebsiteRuntime } from 'runable-website-runtime';

export default defineConfig({
  plugins: [
    RunableWebsiteRuntime({
      mode: 'edit',
      apiKey: process.env.RUNABLE_API_KEY ?? ''
    })
  ]
});