docs/docs/en/plugin-development/client/examples/index.md
Previous chapters introduced various capabilities including Plugin, Router, Component, Context, FlowEngine, etc. This chapter ties them together -- through several complete tutorial examples, demonstrating the entire process of building a plugin from creation to completion.
Each example corresponds to a runnable example plugin that you can view the source code of or run locally.
| Example | Capabilities Involved | Difficulty |
|---|---|---|
| Building a Plugin Settings Page | Plugin + Router + Component + Context + Server | Beginner |
| Building a Custom Display Block | Plugin + FlowEngine (BlockModel) | Beginner |
| Building a Custom Field Component | Plugin + FlowEngine (FieldModel) | Beginner |
| Building a Custom Action Button | Plugin + FlowEngine (ActionModel) | Beginner |
| Building a Full-Stack Data Management Plugin | Plugin + FlowEngine (TableBlockModel + FieldModel + ActionModel) + Server | Intermediate |
It's recommended to read them in order. The first example uses React components + a simple server API without involving FlowEngine; the middle three demonstrate FlowEngine's block, field, and action base classes respectively; the last one ties together the blocks, fields, and actions learned earlier, adds a server-side data table, and forms a complete full-stack plugin. If you're not sure whether to use React components or FlowModel, check Component vs FlowModel first.