Restaurant / menu board images

A small business owner runs this when the menu changes. Prices move. An item is added or dropped. A dietary tag appears on a dish. The board on the display, or the file you hand to print, has to show the current menu.

This is regular menu work. It happens whenever prices move, not once when the board is first designed. The owner should be able to edit text and get a new board without a layout pass.

The job is a menu board image that lists sections, items, prices, and dietary chips. The content is the menu. The layout stays in the component. When a price moves, you edit the text in the data file and export again. You are not redrawing the board.

Give Lerret a React component under .lerret/ and optional data. export writes a PNG, or a JPEG if you are handing the file to print. Same component, data swapped.

The component is .lerret/menu/board.jsx. It draws sections, items, prices, and dietary chips. The board is a React component under .lerret/. Sections stack. Items inside a section map over the list. Tags render as chips. The type and the spacing live in the component, not in a one-off file for this week’s menu.

The data is { sections: [{ name, items: [{ name, price, tags }] }] } in one data file, edited whenever prices move. Each section has a name and an item list. Each item has a name, a price, and tags. That is the whole menu. One file. Change a field, re-run export.

The image is a PNG at the display screen’s resolution, or a JPEG for print handoff. Pick the format that matches how the board is shown.

Menu edits are text edits. The board re-renders without touching layout. You change a price in the file and the next export is the new board. A design file would need someone to open the frame and type the new number. Here the number is already a field.

Edit the one data file and run export. Use PNG at the display screen’s resolution, or JPEG for print handoff. Sections, items, prices, and tags all come from that file. The layout stays in .lerret/menu/board.jsx.

npx @lerret/cli@latest export

Start a project with npx create-lerret@latest. More in the use cases index.