Built-in Renderers

PtahJs separates rendering from core state. You register a renderer through createPtah({ renderer }).

import { createPtah, WebRenderer } from '@ptahjs/ui-vue';

app.use(
    createPtah({
        id: 've1',
        renderer: WebRenderer,
        modules: moduleTree,
        parameterComponents: editors,
    })
);

---

WebRenderer

import { WebRenderer } from '@ptahjs/ui-vue';

Sets runtime.renderMode = "WEB" and mounts web module-item rendering logic.

SceneRenderer

import { SceneRenderer } from '@ptahjs/ui-vue';

Sets runtime.renderMode = "SCENE" and is intended for 3D/scene-style layouts.

FlowRenderer

import { FlowRenderer } from '@ptahjs/ui-vue';

Sets runtime.renderMode = "FLOW" and uses flow-oriented template rendering.

---

Custom Renderers

A custom renderer is an object with:

• install(runtime)
• template (Vue component)

import MyTemplate from './MyTemplate.vue';

export const MyRenderer = {
    install(runtime) {
        runtime.renderMode = 'WEB';
    },
    template: MyTemplate,
};

Use it via createPtah({ renderer: MyRenderer, ... }).