DOCSEARCHbyAlgolia
Submit Docs

TinyEngine

repository·develop·Indexed 25 days ago

https://github.com/opentiny/tiny-engine

A low-code engine for customizing, building, and integrating low-code platforms in real time. It supports hybrid high-code and low-code development, LLM-assisted application building, and third-party component extensions. The ecosystem includes a block compiler (@opentiny/tiny-engine-block-compiler), a design canvas with isolated iframe architecture, and a GenerateCodeService for parsing schemas and generating application code.

Tokens
126K
Snippets
205
Records
758
Agent score
83%

What's inside tiny-engine

  1. Overview of TinyEngine APIs

    develop

    TinyEngine's API surface is divided into two primary categories: TinyEngine Capability APIs (client-side engine capabilities) and Open Source Backend Interface APIs (server-side management and services).

    TinyEngine Capability APIs

    These APIs provide core engine functionality and are categorized into:

    • Main Package APIs: Core engine operations.
    • Canvas APIs: Interaction with the design canvas.
    • Layout APIs: Managing component layouts.
    • Material APIs: Handling design materials and components.
    • Property Panel APIs: Controlling the component property editor.

    Backend Interface APIs

    These APIs manage the lifecycle and services of the low-code platform, including:

    • AI Features: AI-driven capabilities.
    • Application Management: Managing low-code applications.
    • Block Management: Categorization and management of design blocks.
    • Data Source Management: Handling data connections.
    • DSL Code Generation: Converting DSL to code.
    • Material Center: Managing the repository of materials.
    • Page Management: Managing pages within applications.

  2. Overview of TinyEngine Luoshu Architecture

    develop
    The TinyEngine Luoshu (洛书) architecture is a new extensible framework designed to allow developers to customize low-code platforms without forking the core engine. This architecture enables users to synchronize official updates (new features and bug fixes) while maintaining custom business logic for plugins, designers, layouts, and code generation.

  3. Overview of TinyEngine Low-Code Engine

    develop

    TinyEngine is a low-code engine designed to serve as a foundation for building various specialized low-code platforms, such as workflow orchestration, page orchestration, mobile development, and large-screen dashboard platforms. It aims to reduce repetitive infrastructure work by providing a standardized engine that can be customized into specific applications.

    Key capabilities include:

    • Customizable Platforms: Uses a complete plugin system including UI libraries, toolkits, panel control, lifecycle management, and public API registration.
    • Open Material Protocol: Supports importing third-party component libraries like elementUI and AntDesign via open extension interfaces.
    • Hybrid Development: Supports combining low-code for rapid business development with high-code (professional coding) for complex business logic.
    • AI-Assisted Development: Designed to integrate with AI capabilities for enhanced development workflows.
    • Integrated Architecture: Built on the Luoshu (洛书) integrated architecture to facilitate rapid customization for business systems.

  5. Overview of the TinyEngine Ecosystem

    develop

    The TinyEngine ecosystem provides the essential building blocks for creating a visual designer. It is composed of five key pillars:

    • Material Ecosystem: The raw materials for building visual pages, categorized into Components and Blocks. A Material Package is a collection of these components and blocks.
    • Toolbar and Plugin Ecosystem: Functional tools used during visual construction. Examples include Toolbar tools (e.g., Undo, Redo, Save) and Plugins (e.g., Data Source, Internationalization).
    • Theme Ecosystem: Defines the UI style and visual appearance of the designer.
    • DSL Ecosystem: Provides the capability to generate source code from page Schemas.

    TinyEngine provides official core components, blocks, material packages, themes, plugins, tools, and DSLs. The ecosystem is designed to support the integration of third-party component libraries and user-developed extensions.

  6. Overview of Designer Interface Modules

    develop

    The TinyEngine Designer interface is composed of several functional modules designed for low-code visual development:

    • Top Toolbar: Contains global actions like breadcrumbs, locking/unlocking, viewport switching, AI assistance, theme switching, undo/redo, canvas clearing, previewing, downloading source code, and saving.
    • Left Plugin Panel: Provides access to various management plugins (Materials, Outline Tree, Page Management, Block Management, Data Source, Resources, Internationalization, JS Methods, State Management, Attachments, and Model Management).
    • Central Canvas: The core visual design area where components are dragged from the plugin panel and interacted with to modify properties and styles.
    • Right Settings Panel: Used for fine-tuning selected components via Property, Style, and Advanced settings.
    • Bottom Node Tree: Displays the hierarchical structure of the document from the body down to the currently selected node.

  8. Understand TinyEngine architecture and package responsibilities

    develop

    The TinyEngine architecture is divided into several key packages and functional areas:

    Core Packages

    • canvas: Handles middle canvas rendering.
    • common: Common components and metaComponent.
    • controller: Common logic control layer.
    • design-core: The main entry point.
    • http: Handles HTTP requests.
    • i18n: Wrapper for lowcode-i18n.
    • plugins: Related to the left panel.
    • settings: Components for the right property panel.
    • svgs: SVG wrapper components.
    • theme: Theme-related styles.
    • toolbars: Top toolbar packages.
    • utils: Common utilities.
    • vue-generator: Code generation package.
    • webcomponent: Webcomponent encapsulation.

    Functional Areas

    • Left Panel: Manages application/page states and logic control/writing.
    • Middle Canvas: Responsible for view layer orchestration.
    • Right Property Panel: Responsible for view layer property control, fine-grained style orchestration, and event binding.

    Key Entry Points

    • Resource Requests: Initiated in packages/design-core/src/App.vue using useResource().fetchResource().
    • Canvas Rendering: Managed in packages/canvas/src/components/render/ via RenderMain.js (entry and API provider) and render.js (recursive renderer).
    • Property Panel Linkage: When a node is selected in DesignCanvas.vue, useProperties().getProps(node, parent) calculates the properties, and useCanvas().setCurrentSchema(node) updates the schema to drive the right panel.

  9. Understand Materials and Material Asset Packs

    develop

    In TinyEngine, Materials are the building blocks used to construct visual pages. They are categorized by granularity into two types:

    1. Component Libraries (组件库): The smallest reusable units. They expose configuration options but hide internal implementation. Note: Once the designer is customized, component libraries cannot be added or deleted.
    2. Blocks (区块): Higher-level units that can contain one or more components or other blocks, often including business logic. Blocks are divided into:
      • Management Side (管理侧): Users drag a block into the designer, edit its internal components/blocks and configurations, expose properties and events, and then publish it.
      • Consumption Side (消费侧): Receives the updated content once a block is published.
      • Note: Unlike component libraries, blocks can still be added or deleted after the designer is customized.

    Material Asset Packs (物料资产包) are configuration files that define how these components and blocks are described and used within the designer. They act as the collection that populates the component and block panels in the designer UI.

  10. Understand Code Output (Schema to Code) in TinyEngine

    develop

    In TinyEngine, pages are described using JSON data that follows the TinyEngine page construction protocol (Page Schema). The Code Output module acts as a bridge that converts this JSON Schema into semantic, human-readable source code (e.g., Vue files).

    Example Transformation:

    Input (JSON Schema):

    {
  "componentName": "div",
  "props": {
    "style": "color: red; text-align: center;"
  },
  "children": [
    {
      "componentName": "Text",
      "props": {
        "text": "TinyEngine 前端可视化设计器，为设计器开发者提供定制服务，在线构建出自己专属的设计器。"
      }
    }
  ]
}

    Output (Vue Code):

    <div style="color: red; text-align: center;">
  <span>TinyEngine 前端可视化设计器，为设计器开发者提供定制服务，在线构建出自己专属的设计器。</span>
</div>

  11. Extend TinyEngine to build custom designers

    develop
    TinyEngine provides extensibility to build custom low-code designers without needing to modify the core engine source code. Developers can use APIs, plugins, and custom DSL npm packages to implement unique business functions and tools. The engine's extension capabilities cover almost all functional aspects of the designer, allowing for the creation of highly customized design environments.

  12. Understand the architecture of tiny-engine-canvas

    develop

    The tiny-engine-canvas module consists of two distinct parts:

    1. canvas-container: The outer container that works with other tiny-engine-* packages even if they have different versions.
    2. canvas: The actual canvas rendered inside an iframe window.

    Key behaviors to note:

    • Build Strategy: During the build phase, these parts are built separately. The canvas product is embedded in base64 format within the canvas-container product.
    • Dependency Isolation: The canvas product only externalizes vue and vue-i18n. All other dependent packages are packed into the canvas product and cannot be replaced with other versions. This means you cannot joint-debug dependent packages inside the canvas product code; you must use the canvas module source code for joint debugging.
    • Version Decoupling: This architecture allows the canvas (inside the iframe) and the canvas-container (outside the iframe) to use completely different versions of vue without needing to synchronize them.