https://github.com/refinist/ccstatusline-editor
A visual editor for building ccstatusline configurations — drag, drop, pr eview, ship. 一个可视化编辑器，用来搭建 ccstatusline 状态栏配置——拖拽、预览、一键生成。
https://github.com/refinist/ccstatusline-editor
anthropic ccstatusline claude claude-code cloudflare-workers powerline status-line statusline terminal visual-editor vite vue
Last synced: 1 day ago
JSON representation
A visual editor for building ccstatusline configurations — drag, drop, pr eview, ship. 一个可视化编辑器，用来搭建 ccstatusline 状态栏配置——拖拽、预览、一键生成。
- Host: GitHub
- URL: https://github.com/refinist/ccstatusline-editor
- Owner: refinist
- License: mit
- Created: 2026-07-03T08:59:04.000Z (8 days ago)
- Default Branch: main
- Last Pushed: 2026-07-03T15:31:31.000Z (8 days ago)
- Last Synced: 2026-07-03T17:25:14.425Z (8 days ago)
- Topics: anthropic, ccstatusline, claude, claude-code, cloudflare-workers, powerline, status-line, statusline, terminal, visual-editor, vite, vue
- Language: TypeScript
- Homepage: https://ccse.refineup.com
- Size: 293 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Agents: AGENTS.md
Awesome Lists containing this project
README
CCStatusline Editor
English | 简体中文
A visual editor for building
ccstatusline
configurations — drag, drop, preview, ship.
## What it does
This is a browser-based editor for [ccstatusline](https://github.com/sirmalloc/ccstatusline), the status line tool for Claude Code. Compose your status line here and see exactly what your terminal will render — no local install, no Nerd Font required just to preview.
- **True-to-terminal preview** — 256-color / truecolor and powerline arrows are drawn as SVG in the browser, matching what your terminal will actually show.
- **Point-and-click widgets** — git status, model, context usage, quota countdowns, custom text, and more, all configured through the UI.
- **Templates** — ready-made status lines you can apply in one click, then tweak.
- **Share links** — send a link that reopens the editor with your exact config loaded.
- **Round-trip editing** — apply a config from the editor via the companion `@refinist/ccsa` CLI, pull it back later with `@refinist/ccsa export`, and keep refining.
- **Theme rotation** — build a pool of themes and have your status line switch between them automatically on a schedule (hourly / daily / weekly / a custom interval), or pin a fixed look to each weekday. Cycle in order or shuffle at random, then export the pool as a bundle the `@refinist/ccsa` CLI runs with `rotate on`. See [`ccsa-rotation-rainbow-week.json`](ccsa-rotation-rainbow-week.json) for a ready-to-run sample — a seven-theme "rainbow week" that rotates a fresh gradient and a per-weekday mood line every day.
- **i18n** — English, 简体中文, 繁體中文.
## Getting started
```bash
pnpm install
# frontend dev server (http://localhost:3173)
pnpm dev
```
The share feature (`/api/share`) is backed by a Cloudflare Worker + KV. To exercise it locally, also run:
```bash
# Worker + local KV emulation (http://localhost:8787)
pnpm worker:dev
```
`pnpm dev` proxies `/api/*` to `:8787`, so running both together gives you frontend hot-reload with a working share flow.
```bash
# type-check + production build
pnpm build
# eslint
pnpm lint
# vitest
pnpm test
```
## Related projects
- [sirmalloc/ccstatusline](https://github.com/sirmalloc/ccstatusline) — the status line renderer this editor targets.
- [refinist/ccstatusline-apply](https://github.com/refinist/ccstatusline-apply) — `@refinist/ccsa`, the companion CLI that writes a config generated here to `~/.config/ccstatusline/settings.json` on your machine.
## License
[MIT](./LICENSE)
Copyright (c) 2026-present, [REFINIST](https://github.com/refinist)