@stdout-design/cli 0.1.6 → 0.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +164 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,5 +1,167 @@
|
|
|
1
1
|
# @stdout-design/cli
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
<p align="center">
|
|
4
|
+
<a href="https://www.npmjs.com/package/@stdout-design/cli">
|
|
5
|
+
<img src="https://img.shields.io/npm/v/@stdout-design/cli" alt="npm version">
|
|
6
|
+
</a>
|
|
7
|
+
<img src="https://img.shields.io/npm/l/@stdout-design/cli" alt="MIT license">
|
|
8
|
+
<img src="https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=white" alt="TypeScript">
|
|
9
|
+
<img src="https://img.shields.io/badge/Bun-000?logo=bun&logoColor=white" alt="Bun">
|
|
10
|
+
<img src="https://img.shields.io/badge/PRs-welcome-brightgreen" alt="PRs welcome">
|
|
11
|
+
</p>
|
|
4
12
|
|
|
5
|
-
|
|
13
|
+
> Storybook for images — in your repo and speaking to your agents.
|
|
14
|
+
|
|
15
|
+
A CLI for rendering your own TSX components into pixel-perfect social and marketing images. Live preview studio, batch rendering from data, and MCP server for AI agents.
|
|
16
|
+
|
|
17
|
+
## Quick start
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
# Install
|
|
21
|
+
bun add -d @stdout-design/cli
|
|
22
|
+
|
|
23
|
+
# Scaffold a project
|
|
24
|
+
npx studio init
|
|
25
|
+
|
|
26
|
+
# Render an image
|
|
27
|
+
npx studio render bento-feature --title "Hello" --out hello.png
|
|
28
|
+
|
|
29
|
+
# Or open the live studio
|
|
30
|
+
npx studio dev
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Installation
|
|
34
|
+
|
|
35
|
+
```bash
|
|
36
|
+
bun add -d @stdout-design/cli
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
Or globally:
|
|
40
|
+
|
|
41
|
+
```bash
|
|
42
|
+
bun add -g @stdout-design/cli
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
**Prerequisites:** Node.js 18+, Bun 1.2+.
|
|
46
|
+
|
|
47
|
+
## Commands
|
|
48
|
+
|
|
49
|
+
| Command | Description |
|
|
50
|
+
|---------|-------------|
|
|
51
|
+
| `studio init` | Scaffold a new studio project |
|
|
52
|
+
| `studio dev` | Start the live preview studio |
|
|
53
|
+
| `studio render <template>` | Render a single template or batch |
|
|
54
|
+
| `studio cache stats` | Show cache statistics |
|
|
55
|
+
| `studio cache clean` | Clear the render cache |
|
|
56
|
+
| `studio lint` | Check templates for compatibility |
|
|
57
|
+
|
|
58
|
+
### studio render
|
|
59
|
+
|
|
60
|
+
```bash
|
|
61
|
+
studio render <template> [options]
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
| Option | Description |
|
|
65
|
+
|--------|-------------|
|
|
66
|
+
| `--key value` | Pass props to the template |
|
|
67
|
+
| `--data file.csv` | Batch render from CSV or JSON |
|
|
68
|
+
| `--preset name` | Output preset (default: og) |
|
|
69
|
+
| `--locale lang` | Locale for i18n |
|
|
70
|
+
| `--out-dir path` | Output directory (default: ./out/) |
|
|
71
|
+
| `--out file.png` | Single output file |
|
|
72
|
+
|
|
73
|
+
### studio dev
|
|
74
|
+
|
|
75
|
+
Starts a dev server on `localhost:3000` with:
|
|
76
|
+
- Hot-reload when templates change
|
|
77
|
+
- Auto-generated prop panel
|
|
78
|
+
- Side-by-side preview across presets
|
|
79
|
+
- Export templates to PNG
|
|
80
|
+
|
|
81
|
+
### studio init
|
|
82
|
+
|
|
83
|
+
Scaffolds a new studio project with:
|
|
84
|
+
- TypeScript configuration
|
|
85
|
+
- Example templates to get started
|
|
86
|
+
- Sample data files for batch rendering
|
|
87
|
+
- Locale files for i18n
|
|
88
|
+
|
|
89
|
+
## Writing templates
|
|
90
|
+
|
|
91
|
+
A template is a TSX component with typed props:
|
|
92
|
+
|
|
93
|
+
```tsx
|
|
94
|
+
type Props = {
|
|
95
|
+
title: string;
|
|
96
|
+
stat: string;
|
|
97
|
+
};
|
|
98
|
+
|
|
99
|
+
export default function MilestoneCard({ title, stat }: Props) {
|
|
100
|
+
return (
|
|
101
|
+
<div className="bg-black text-white p-8 rounded-2xl">
|
|
102
|
+
<h1 className="text-4xl font-bold">{title}</h1>
|
|
103
|
+
<p className="text-lg mt-2">{stat}</p>
|
|
104
|
+
</div>
|
|
105
|
+
);
|
|
106
|
+
}
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
Drop it in `templates/` and it's immediately renderable.
|
|
110
|
+
|
|
111
|
+
## AI agent integration
|
|
112
|
+
|
|
113
|
+
Add to your agent's MCP config:
|
|
114
|
+
|
|
115
|
+
```json
|
|
116
|
+
{
|
|
117
|
+
"mcpServers": {
|
|
118
|
+
"stdout-design": {
|
|
119
|
+
"command": "npx",
|
|
120
|
+
"args": ["-y", "@stdout-design/cli", "mcp"]
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
**Available tools:** `list_templates`, `render`, `render_batch`, `list_presets`
|
|
127
|
+
|
|
128
|
+
## Project structure
|
|
129
|
+
|
|
130
|
+
```
|
|
131
|
+
my-project/
|
|
132
|
+
├── studio.config.ts template registry, presets, locales
|
|
133
|
+
├── templates/ your TSX components
|
|
134
|
+
├── data/ CSV/JSON for batch renders
|
|
135
|
+
├── locales/ translation files
|
|
136
|
+
└── out/ rendered assets (gitignored)
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
## Configuration
|
|
140
|
+
|
|
141
|
+
```ts
|
|
142
|
+
export default {
|
|
143
|
+
templates: "./templates",
|
|
144
|
+
presets: [
|
|
145
|
+
{ name: "og", width: 1200, height: 630 },
|
|
146
|
+
{ name: "instagram", width: 1080, height: 1080 },
|
|
147
|
+
],
|
|
148
|
+
locales: ["en", "ar"],
|
|
149
|
+
outDir: "./out",
|
|
150
|
+
};
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
## Platform presets
|
|
154
|
+
|
|
155
|
+
| Preset | Size | Use |
|
|
156
|
+
|--------|------|-----|
|
|
157
|
+
| og | 1200×630 | Open Graph / social cards |
|
|
158
|
+
| x-card | 1200×675 | X (Twitter) cards |
|
|
159
|
+
| linkedin | 1200×627 | LinkedIn link previews |
|
|
160
|
+
| instagram | 1080×1080 | Instagram feed posts |
|
|
161
|
+
| instagram-story | 1080×1920 | Instagram stories |
|
|
162
|
+
| appstore | 1290×2796 | App Store screenshots |
|
|
163
|
+
| playstore | 1080×1920 | Play Store screenshots |
|
|
164
|
+
|
|
165
|
+
## License
|
|
166
|
+
|
|
167
|
+
MIT
|