Woodstock, drawn on one grid.
A concept for the next Woodstock app. The product stays the same: 24/5 trading, ¥0 fees, fractional shares from ¥1, AI summaries. The interface moves onto Design system 1, the grid every 0001 product is built on, with a chart library made for it.
1What to try
- Scrub any chart with a finger or the pointer. The price above it follows.
- Open a stock and choose Live: prices tick every second, and the newest one blinks.
- Buy in yen from ¥1 with the keypad. Fees show as free, and the order stays on this page.
- Discover shows live buy and sell ratios, news with its tickers, and movers by category.
- Account switches English and Japanese, light and dark, and the grid itself.
2One grid, every pixel accounted for
Every block, row and control is a whole number of 20px squares, measured from one origin, so edges line up across a screen and between screens. Lines are one pixel and fall on the grid. Numbers sit in fixed cells with tabular figures, so a ticking price never moves the layout. The same rules hold in light, dark and Japanese.
3Grid chart
The website draws its charts with lightweight-charts. Grid chart keeps that API
(createChart, addSeries, setData,
subscribeCrosshairMove), so the website's chart code carries over, and changes how it draws:
- Each row line is a price level. The scale picks a step of 1, 2, 2.5 or 5 × 10ⁿ so the levels land on the page grid.
- Each pixel column holds the high and low of the prices inside it. A day of minute prices and five years of weekly ones draw with the same one-pixel line, without blur.
- Fills are one-pixel lines two pixels apart, like the waveforms in 0001 Music.
import { createChart } from "@0001/grid-chart";
const chart = createChart(canvas, { extremes: true, scaleLabels: true });
const price = chart.addSeries({ kind: "baseline", baseValue: previousClose });
price.setData(points);
chart.subscribeCrosshairMove(({ point }) => showPrice(point));| Minified | Gzipped | |
|---|---|---|
| lightweight-charts 5.2.0, on woodstock.co today | 196 KB | 61.6 KB |
| Grid chart core | 8.2 KB | 3.4 KB |
Grid chart does less today: line, area and baseline series, sparklines, bars and ranges. Candlesticks, zoom and panes would come with the pilot below.
4Proposed stack
Why move off Flutter
Flutter is a reasonable way to ship one app to two stores quickly. It draws every pixel with its own engine, though, so it shares no code with woodstock.co, and widgets and Live Activities still need Swift extensions bridged into it. This proposal shares code where it pays (the web, which already runs Woodstock's stock pages and MCP) and goes fully native where customers feel it, on iPhone.
| Flutter app today | Proposed | |
|---|---|---|
| Shared with woodstock.co | Nothing | Components, chart, tokens |
| Widgets, Live Activities | Swift extensions beside the Dart app | Native SwiftUI |
| Text and controls | Drawn by Flutter's engine | The platform's own |
| Design system | Separate from the website's | Design system 1 in CSS and Swift |
5Next steps
- A 30-minute walkthrough of this concept with your product and app teams.
- A pilot on the website: Grid chart replaces lightweight-charts on the stock pages, measured on bundle size and the Lighthouse mobile score.
- A SwiftUI build of the portfolio, stock page and trade sheet on TestFlight, with sample data.
- A decision on the app with both in hand.