Introduction

What Is PtahJs

PtahJs is a headless low-code engine focused on schema-driven rendering, visual editing, and extensible runtime behavior.

What It Gives You

• Vue-based runtime rendering
• Visual designer mode with drag and drop
• Schema-first module system
• Extensible lifecycle pipeline
• Optional 3D and advanced renderer packages

Core Workflow

1. Register modules, renderers, and editors with createPtah()
2. Create a runtime with useRuntimeApp() or useDesignerApp()
3. Load or export page schema JSON

Typical Use Cases

• Low-code page editors
• Dashboard builders
• Visual content assembly tools
• Scene-based editors

Visual Layout

Header

module area

workspace

configuration area

<template>
    <main class="text-white">
        <header class="bg-purple-300 py-1 px-2 mb-1">Header</header>
        <div class="flex">
            <aside class="bg-purple-300 py-1 px-2 mr-1 w-[120px] flex items-center justify-center">
                module area
            </aside>
            <div class="bg-rose-300 py-1 px-2 flex-1 h-[300px] flex items-center justify-center">
                workspace
            </div>
            <div class="bg-purple-300 py-1 px-2 ml-1 w-[120px] flex items-center justify-center">
                configuration area
            </div>
        </div>
    </main>
</template>

<script>
export default {
    name: 'LowcodeLayout',
    setup() {
        return {};
    }
};
</script>