71 figures · Open a figure to explore its code.
(gum_core)
A circuit-board view of the bundled Gum CLI: Gum JSX, including TeX math, flows into a compact rendering engine and out to SVG, PNG, MP4, PDF, and PPTX. The size callout describes the gzipped Gum 2.0 bundle: approximately 0.9 MB of code and 0.7 MB of fonts.
Stacks arrange the title, diagram, footer, and card contents. A Group supplies the local circuit-board canvas. The chip dimensions determine its repeated pins, while rounded Arrow routes connect the input and output cards. The TeX card displays literal source in a monospace font, matching the JSX input card.
The palette, output labels, chip geometry, and reusable card and trace components are declared at the top of the example. The root's fit prop scales the complete composition for smaller previews.
fit
View the source.
// A tiny rendering engine, drawn with the engine itself. const ink = '#173B33' const muted = '#587269' const mint = '#087C57' const blue = '#226EA7' const gold = '#A26713' const board = '#F7FAF8' const panel = '#FFFFFF' const grid = '#CEDFD6' const point = (x, y) => [em(x), em(y)] const area = { width: 50, height: 16 } const input = { width: 13, height: 6.5 } const output = { width: 11, height: 4.7 } const inputTop = input.height / 2 const inputBottom = area.height - input.height / 2 const chip = { x: area.width / 2, y: area.height / 2, size: 11 } const half = chip.size / 2 const outputs = [ { label: 'SVG', detail: 'Scalable vectors', color: mint, y: output.height / 2 }, { label: 'PNG / MP4', detail: 'Ready-to-use pixels', color: blue, y: area.height / 2 }, { label: 'PDF / PPTX', detail: 'Print-ready pages', color: gold, y: area.height - output.height / 2 }, ] const Trace = ({ points, color = mint, arrow = false }) => ( <Arrow points={points.map(([x, y]) => point(x, y))} end-head={arrow} radius={em(0.35)} stroke={color} stroke-width={em(0.1)} head-size={em(0.4)} /> ) const Card = ({ children, ...props }) => ( <Frame padding={em(1)} background={panel} border-color={grid} border-width={em(0.06)} border-radius={em(0.5)} {...props} > {children} </Frame> ) return ( <Box fit font-size={px(20)} padding={em(2.5)} background={board} color={ink}> <VStack gap={em(2)}> <Text font-size={em(2)} font-weight={bold}>Gum is a compact and versatile renderer</Text> <Group width={em(area.width)} height={em(area.height)}> {range(1, area.width).flatMap(x => range(1, area.height).map(y => ( <Circle pos={point(x, y)} width={em(0.055)} fill={grid} stroke={none} /> )))} {range(-4, 5).flatMap(offset => [ <Trace color={grid} points={[ [chip.x + offset, chip.y - half - 1.3], [chip.x + offset, chip.y - half], ]} />, <Trace color={grid} points={[ [chip.x + offset, chip.y + half], [chip.x + offset, chip.y + half + 1.3], ]} />, <Trace color={grid} points={[ [chip.x - half - 1.3, chip.y + offset], [chip.x - half, chip.y + offset], ]} />, <Trace color={grid} points={[ [chip.x + half, chip.y + offset], [chip.x + half + 1.3, chip.y + offset], ]} />, ])} <Trace arrow points={[[input.width, inputTop], [15, inputTop], [15, 6], [chip.x - half, 6]]} /> <Trace arrow color={blue} points={[[input.width, inputBottom], [16, inputBottom], [16, 10], [chip.x - half, 10]]} /> {outputs.map(({ color, y }, index) => ( <Trace arrow color={color} points={[ [chip.x + half, chip.y + (index - 1) * 3], [34 + index, chip.y + (index - 1) * 3], [34 + index, y], [area.width - output.width, y], ]} /> ))} <Card pos={point(input.width / 2, inputTop)} width={em(input.width)} height={em(input.height)}> <VStack gap={em(0.5)}> <Text font-weight={bold} color={mint}>Gum JSX</Text> <Text font-family={mono} font-size={em(0.75)} whitespace="pre">{`<Frame padding={em(1)}> <Circle fill={mint} /> </Frame>`}</Text> </VStack> </Card> <Card pos={point(input.width / 2, inputBottom)} width={em(input.width)} height={em(input.height)}> <VStack gap={em(0.5)}> <Text font-weight={bold} color={blue}>TeX math</Text> <Text font-family={mono} font-size={em(0.75)}>{String.raw`e^{i\pi} + 1 = 0`}</Text> <Text color={muted} font-size={em(0.7)}>Built right into your JSX</Text> </VStack> </Card> <Frame pos={point(chip.x, chip.y)} width={em(chip.size)} height={em(chip.size)} padding={em(0.5)} border-radius={em(0.65)} border-color={mint} border-width={em(0.1)} background={panel} > <Frame padding={em(0.8)} border-color={grid} border-width={em(0.06)} border-radius={em(0.3)} > <VStack width="fill" height="fill" align="center" justify="center" gap={em(0.5)}> <Text font-size={em(2.4)} font-weight="bold" color={mint}>GUM</Text> <Text font-size={em(0.85)} font-weight="bold">RENDERING CORE</Text> <Text font-family={mono} font-size={em(0.9)} color={mint}>0.9 MB code</Text> <Text font-family={mono} font-size={em(0.9)} color={blue}>0.7 MB font</Text> </VStack> </Frame> </Frame> {outputs.map(({ label, detail, color, y }) => ( <Card pos={point(area.width - output.width / 2, y)} width={em(output.width)} height={em(output.height)}> <VStack gap={em(0.3)}> <Text font-size={em(1.2)} font-weight="bold" color={color}>{label}</Text> <Text font-size={em(0.75)} color={muted}>{detail}</Text> </VStack> </Card> ))} </Group> </VStack> </Box> )