Non-UI snippets | next-live docs

Not everything worth storing as editable code renders UI. Control panels accumulate validators, pricing rules, config builders: plain modules with no JSX.

compile vs compileModule#

tsx

compile(...)        // insists on a component
compileModule(...)  // returns whatever the snippet exported

useLiveModule#

useLiveModule: non-UI snippet

Example snippet (no default export required):

tsx

import { getCartCount, removeLastItem } from '@app/store';

export function run() {
removeLastItem();
return getCartCount();
}

Client usage:

tsx

const { exports, error, isCompiling } = useLiveModule({ code: source, modules });

const run = exports?.run;
run?.(); // call exported function

Same trust model

Non-UI snippets still evaluate in the current realm with full page authority. Only run code from authors you trust.

Typing exports#

Pass a type parameter. It is a claim, not a runtime check:

tsx

interface PricingRule {
validate: (n: number) => boolean;
total: (n: number) => number;
}

const { exports } = useLiveModule<PricingRule>({ code: source });