TokUI

English

简体中文

English

简体中文

Theme

Showcase ​

A collection of finished examples. Rather than walking through individual component properties, this page presents complete DSL snippets that mirror real business scenarios — showing how TokUI components compose into production-ready interfaces: registration forms, CRUD consoles, data dashboards, sales and customer analysis reports, and AI conversation fragments. Each example shows the formatted, syntax-highlighted DSL on the left and a live render on the right; click "Edit" to modify it in real time.

Registration Form ​

A card wrapping a form, covering the most typical registration scenario: username, password, and email inputs, a select for country, a checkbox to accept terms, and an ft footer holding the submit and reset buttons.

1[card tt:"创建账号"]
2 [p v:muted 填写以下信息即可完成注册，所有字段均为必填。]
3 [form act:/api/register mtd:post sub:onRegister]
4 [row]
5 [col span:12]
6 [input l:"用户名" n:username ph:"3-16 位字母数字" req]
7 [/col]
8 [col span:12]
9 [pwd l:"密码" n:password ph:"至少 8 位" req]
10 [/col]
11 [/row]
12 [row]
13 [col span:12]
14 [input t:email l:"邮箱" n:email ph:"name@example.com" req]
15 [/col]
16 [col span:12]
17 [select l:"所在国家" n:country ph:"请选择" req]
18 [opt v:cn tx:"中国" chk]
19 [opt v:us tx:"美国"]
20 [opt v:jp tx:"日本"]
21 [opt v:sg tx:"新加坡"]
22 [opt v:de tx:"德国"]
23 [/select]
24 [/col]
25 [/row]
26 [checkbox l:"我已阅读并同意《用户协议》与《隐私政策》" id:agree req]
27 [ft]
28 [btn tx:"立即注册" v:primary sub:onRegister]
29 [btn tx:"重置" t:reset]
30 [/ft]
31 [/form]
32[/card]
Loading TokUI…
TokUI DSL · code ↔ render

The form's sub: handler must be pre-registered via TokUI.registerHandler('onRegister', fn) and is invoked when the submit button is pressed; act / mtd provide a native-form fallback when JavaScript is unavailable.

Form + Table Linkage ​

An entry form on top and a table below showing the records that have been entered. Common in back-office sub-pages like "quickly add a member".

1[card tt:"团队成员管理"]
2 [p v:muted 录入成员后即时追加到下方列表。]
3 [form sub:onAddMember]
4 [row]
5 [col span:8]
6 [input l:"姓名" n:name ph:"如：王磊" req]
7 [/col]
8 [col span:8]
9 [select l:"角色" n:role ph:"请选择"]
10 [opt v:dev tx:"开发"]
11 [opt v:design tx:"设计"]
12 [opt v:pm tx:"产品"]
13 [opt v:qa tx:"测试"]
14 [/select]
15 [/col]
16 [col span:8]
17 [input t:email l:"邮箱" n:email ph:"name@team.com"]
18 [/col]
19 [/row]
20 [ft]
21 [btn tx:"添加成员" v:primary sub:onAddMember]
22 [btn tx:"清空" t:reset]
23 [/ft]
24 [/form]
25[/card]
26[card tt:"成员列表" v:flat]
27 [table stripe]
28 [thead cols:"姓名,角色,邮箱,状态"]
29 [tbody]
30 [tr 王磊,开发,wanglei@team.com,在职]
31 [tr 林晓,设计,linxiao@team.com,在职]
32 [tr 赵峰,产品,zhaofeng@team.com,休假]
33 [tr 陈雨,测试,chenyu@team.com,在职]
34 [/tbody]
35 [/table]
36[/card]
Loading TokUI…
TokUI DSL · code ↔ render

CRUD Console ​

The most classic back-office page: a card containing a search box and bulk action buttons at the top, a striped table with a checkbox column in the middle, and a pagination at the bottom.

1[card tt:"商品管理"]
2 [p v:muted 共 128 条记录，当前第 1 / 13 页。]
3 [row v:inline]
4 [input ph:"输入关键字回车搜索" search clk:onSearch w:280]
5 [btn tx:"搜索" v:primary clk:onSearch]
6 [btn tx:"新增商品" v:success clk:onCreate]
7 [btn tx:"批量上架" clk:onBatch]
8 [btn tx:"导出 CSV" v:ghost clk:onExport]
9 [/row]
10 [table stripe]
11 [thead cols:"#,商品名称,分类,价格,库存,状态,操作"]
12 [tbody]
13 [tr "1,iPhone 15 Pro Max,数码,9999,234,在售,编辑 删除"]
14 [tr "2,Magic Mouse,配件,799,1280,在售,编辑 删除"]
15 [tr "3,MacBook Air M3,数码,8999,56,在售,编辑 删除"]
16 [tr "4,AirPods Pro 2,配件,1899,890,在售,编辑 删除"]
17 [tr "5,HomePod mini,配件,449,0,缺货,编辑 删除"]
18 [tr "6,Apple Watch S9,穿戴,2999,312,在售,编辑 删除"]
19 [tr "7,iPad Air,数码,4799,178,在售,编辑 删除"]
20 [tr "8,Studio Display,数码,11499,24,预售,编辑 删除"]
21 [tr "9,Pencil Pro,配件,949,560,在售,编辑 删除"]
22 [tr "10,Mac mini M4,数码,4499,98,在售,编辑 删除"]
23 [/tbody]
24 [/table]
25 [ft]
26 [pagination page:1 total:128 count:10 clk:onPage]
27 [/ft]
28[/card]
Loading TokUI…
TokUI DSL · code ↔ render

Cells containing spaces or Chinese characters must be wrapped in double quotes as a whole, since the parser splits tokens by space and would otherwise truncate them. To add a checkbox column, change the first entry of the thead's cols to chk.

A card v:highlight highlighted card whose body holds explanatory text, with an ft footer using a btngroup to organize three actions — Save, Cancel, and Export. Common in settings panels or detail editors.

1[card tt:"编辑配送地址" v:highlight]
2 [row]
3 [col span:12]
4 [input l:"收件人" n:receiver val:"周明"]
5 [/col]
6 [col span:12]
7 [input l:"手机号" n:phone val:"13800138000"]
8 [/col]
9 [/row]
10 [row]
11 [col span:12]
12 [input l:"详细地址" n:address ph:"省 / 市 / 区 / 街道门牌" val:"上海市浦东新区世纪大道 100 号"]
13 [/col]
14 [/row]
15 [dv v:dashed]
16 [ft]
17 [btngroup]
18 [btn tx:"保存修改" v:primary clk:onSave]
19 [btn tx:"取消" clk:OnCancel]
20 [btn tx:"导出 PDF" v:ghost clk:onExport]
21 [/btngroup]
22 [/ft]
23[/card]
Loading TokUI…
TokUI DSL · code ↔ render

Data Dashboard ​

A row / col grid layout: a top row of four stat summary cards, with a chart line trend on the lower left and a real-time orders table on the right — a typical operations dashboard.

1[row]
2 [col span:6]
3 [stat tt:"今日营收" pre:¥ v:482910 trend:up]
4 [/col]
5 [col span:6]
6 [stat tt:"活跃用户" v:18342 trend:up]
7 [/col]
8 [col span:6]
9 [stat tt:"订单数" v:1294 trend:up]
10 [/col]
11 [col span:6]
12 [stat tt:"退款率" v:1.2 suf:% trend:down dec:1]
13 [/col]
14[/row]
15[row]
16 [col span:8]
17 [card tt:"近 7 日营收趋势"]
18 [p v:muted 单位：万元]
19 [chart t:line tt:"营收趋势" l:"周一,周二,周三,周四,周五,周六,周日" d:"32,45,38,52,61,78,69" area]
20 [/card]
21 [/col]
22 [col span:4]
23 [card tt:"最新订单" v:flat]
24 [table stripe]
25 [thead cols:"客户,金额,状态"]
26 [tbody]
27 [tr 王磊,¥1299,已支付]
28 [tr 林晓,¥459,待发货]
29 [tr 赵峰,¥8999,已发货]
30 [tr 陈雨,¥189,已退款]
31 [tr 周明,¥3299,已支付]
32 [/tbody]
33 [/table]
34 [/card]
35 [/col]
36[/row]
Loading TokUI…
TokUI DSL · code ↔ render

Report: Sales Analysis ​

A dashboard-style sales analysis report: title card → key-metric stat row → bar-comparison chart → detail table. The whole thing reads like a single BI report page.

1[card tt:"2026 Q1 销售分析报告"]
2 [p v:muted 数据范围：2026-01-01 至 2026-03-31｜生成时间：2026-04-02]
3 [row]
4 [col span:6]
5 [stat tt:"总营收" pre:¥ v:12843210 trend:up]
6 [/col]
7 [col span:6]
8 [stat tt:"同比增长" v:23.6 suf:% trend:up dec:1]
9 [/col]
10 [col span:6]
11 [stat tt:"客单价" pre:¥ v:486 trend:up]
12 [/col]
13 [col span:6]
14 [stat tt:"退货率" v:1.8 suf:% trend:down dec:1]
15 [/col]
16 [/row]
17[/card]
18[row]
19 [col span:12]
20 [card tt:"月度销售对比（万元）"]
21 [chart t:bar tt:"月度销售对比" l:"1月,2月,3月" d:"382,451,451" c:"4f46e5,10b981,f59e0b"]
22 [/card]
23 [/col]
24[/row]
25[card tt:"分渠道明细" v:flat]
26 [table stripe]
27 [thead cols:"渠道,营收(万),占比,同比,负责人"]
28 [tbody]
29 [tr 官方商城,542,42.2%,+18%,张敏]
30 [tr 天猫旗舰,328,25.5%,+12%,李航]
31 [tr 京东自营,231,18.0%,+9%,王磊]
32 [tr 抖音电商,124,9.6%,+58%,陈雨]
33 [tr 线下门店,59,4.7%,-6%,赵峰]
34 [/tbody]
35 [/table]
36[/card]
Loading TokUI…
TokUI DSL · code ↔ render

Report: Customer Analysis ​

A desc description list summarizes the customer profile, paired with a detail table and a callout conclusion note — a fully structured customer-analysis conclusion page.

1[card tt:"重点客户画像：华东大客户 A"]
2 [desc cols:2 stripe bordered]
3 [desc-item l:"客户名称" tx:"上海智云科技有限公司"]
4 [desc-item l:"行业" tx:"企业服务 / SaaS"]
5 [desc-item l:"合作周期" tx:"3 年 4 个月"]
6 [desc-item l:"累计消费" tx:"¥2,184,500"]
7 [desc-item l:"服务等级" tx:"VIP 钻石"]
8 [desc-item l:"客户经理" tx:"林晓"]
9 [/desc]
10[/card]
11[card tt:"近 6 个月成交明细" v:flat]
12 [table stripe]
13 [thead cols:"月份,合同金额,产品,状态"]
14 [tbody]
15 [tr 2026-01,¥386000,企业版授权,已回款]
16 [tr 2026-02,¥420000,增值服务包,已回款]
17 [tr 2026-03,¥298000,培训咨询,已回款]
18 [tr 2026-04,¥515000,扩容 + 续约,已回款]
19 [tr 2026-05,¥312000,定制开发,审批中]
20 [tr 2026-06,¥253500,运维服务,待签约]
21 [/tbody]
22 [/table]
23[/card]
24[callout t:success tt:"分析结论"]
25该客户近 6 个月合同金额稳步上升，回款及时、续约意愿强。建议下季度主动推进 ¥800,000 级别的全栈升级方案，并安排季度高管回访以巩固关系。
26[/callout]
Loading TokUI…
TokUI DSL · code ↔ render

AI Conversation Fragment ​

The closing example, showcasing the overall expressiveness of AI scenarios: a bubble role:ai containing a think reasoning block, a tool-call tool invocation, an md Markdown body, and a msg-actions action bar — a real, streamable conversation reply.

1[bubble role:ai model:"GPT-5.2" time:"2026-06-20 14:32"]
2 [think tt:"正在分析用户问题…"]
3 用户问的是 Q1 销售趋势，需要先查询数据库，再对比去年同期。先调用 sales_query 工具取数。
4 [/think]
5 [tool-call name:"sales_query" status:success duration:"1.2s" id:call_001]
6 查询参数：range=2026-Q1, group_by=channel
7 [/tool-call]
8 [md]
9 ## Q1 销售分析\n\n本季度总营收 **¥12,843,210**，同比 **+23.6%**。核心结论：\n\n- **官方商城**贡献最大，营收 542 万（占比 42.2%）\n- **抖音电商**增速最快，同比 +58%\n- **线下门店**小幅下滑 -6%，建议复盘选址策略\n\n详细数据见上方表格。如需进一步拆分到周维度或地区维度，请告诉我。
10 [/md]
11 [msg-actions copy regenerate like dislike]
12 [/msg-actions]
13[/bubble]
Loading TokUI…
TokUI DSL · code ↔ render

bubble / think / tool-call / md / msg-actions are all containers and must be closed. During streaming, think is shown first as it arrives, then the tool-call status and md body are progressively flushed out, simulating a real typewriter effect.

For properties and variants of more components, see the category docs in the left navigation: Basic Components, Form Controls, Tables, Layout Containers, Charts, AI Chat.