Foxpage: A Lightweight Frontend Low‑Code Framework – Architecture, Features, and Real‑World Use Cases

Author Introduction

Jason Wang, a R&D manager at Ctrip, focuses on low‑code product design and development, exploring industry trends and enterprise adoption.

Background

Low‑code development is rapidly gaining acceptance as a revolutionary "new productivity" for the IT industry, with the global market exceeding $10 billion in 2021 and projected to surpass $20 billion by 2023.

Industry Status

International leaders such as Salesforce, Microsoft, OutSystems, and Mendix offer mature, feature‑rich SaaS solutions, while domestic players like DingTalk YiDa, Mingdao Cloud, Zhixin, and others are still evolving, often targeting specific scenarios.

Hidden Risks

Many enterprises still build custom low‑code tools, leading to duplicated effort because front‑end core functionalities are similar across products; this results in wasted human resources and repeated wheel‑building.

Universal Capability Construction

Common problems include bloated features, high integration and customization costs, limited openness, and poor scenario support. A smaller, more elegant low‑code framework is needed.

What Is Foxpage?

Foxpage is a lightweight frontend low‑code framework that enables visual, component‑driven page development with a focus on flexibility, openness, and extensibility.

Key Features

Visual, WYSIWYG page building

Comprehensive component creation workflow

Multi‑scenario, multi‑device, and multi‑tech‑stack support

Internationalization support

Platform for developers, editors, and operators to collaborate online

Architecture

The framework consists of Foxpage Admin (management console), Foxpage API (RESTful services), Foxpage SDK (Node and JS SDKs), and a component library.

Node SDK provides a Node‑side development kit that fetches page DSL from the API, performs preprocessing, data binding, and resource loading, then renders pages using an embedded React engine.

Core Design

Foxpage’s core is built around a JSON‑based DSL that describes pages and components. The DSL is extensible, allowing custom parsers, variables, and conditional logic.

Headless CMS

The headless CMS separates content management from presentation, offering folder/file structures, custom file types, and RESTful APIs for dynamic content delivery.

Interpreter

The interpreter reads the DSL at runtime, handling resource management, DSL parsing, and rendering, with hooks for plugin extensions.

How It Works

When a request arrives at an SSR API, the Node SDK retrieves the page DSL, processes it, and renders the final HTML using React, enabling fast, low‑code page delivery.

Why Choose Foxpage?

Improves development, page, and release efficiency

Reduces personnel, development, iteration, and maintenance costs

Ensures quality and stability across projects

Low‑Code Development Mode

Transforms traditional “pro‑code” page assembly into visual, diagram‑driven construction, lowering the entry barrier and accelerating delivery.

Engineering Support

Provides component scaffolding, visual debugging, local builds, and best‑practice guidelines without altering existing engineering workflows.

Componentization

Foxpage supplies foundational components, supports custom component development, and offers guidelines for component granularity, reusability, and dynamic data handling.

Extensibility

Designed for multi‑scenario, multi‑tech‑stack, and multi‑device support; the DSL can be extended with custom parsers, and the SDK can swap rendering engines (e.g., Vue.js).

Visual Building

Multiple visual editors (rich‑text, Markdown, page, diagram) are available, with APIs for custom editor integration.

Platformization

Supports multi‑tenant SaaS mode, allowing multiple applications to share a single service instance and publish components, pages, and variables to a marketplace.

Project Practices

Foxpage has been deployed in several Trip.com internal projects, including promotional pages, SEO pages, and email templates, handling thousands of pages and millions of daily SSR calls with sub‑60 ms latency.

Future Roadmap

Version 1.0 (H1 2022): Core low‑code features

Version 1.x (Q2 2022): Internationalization, permissions, debugger, custom components

Version 2.0 (Q4 2022): Admin UI overhaul, workflow simplification

Version 2.x: System integration, serverless, data analysis

Planned scenario expansions include image generation (posters) and further component library enrichment.

Further Reading

For more details, visit the official documentation and related blog posts.