Quick start
Scaffold an Open Assets project with init, preview the templates in the dev server and render every export size to the exports folder in about five minutes.
This page takes you from an empty folder to rendered PNGs. You need Node.js 18 or later (see Installation).
Create a project folder
mkdir marketing && cd marketing
npm init -ynpm install --save-dev @open-assets/open-assetsRun init
npx open-assets initinit asks four questions:
- Project name. Defaults to the folder name. The manifest's
namebecomes<Project name> Assets. - Which assets do you need? Any of App Store Screenshots, App Icon, Logo, Wordmark and Feature Graphic (Google Play).
- Which platforms are you targeting? iOS / App Store, Android / Google Play, Web. Only asked when you picked screenshots or an app icon. Picking nothing defaults to iOS.
- Proceed? Confirm to write files.
In an interactive terminal you toggle options with the keyboard. When stdin is not a TTY (for example when an agent drives it), init falls back to a numbered list and reads comma-separated numbers such as 1,2.
init refuses to run if an assets.json already exists in the directory. It exits with Error: assets.json already exists in this directory.
See what init created
Choosing App Store Screenshots and App Icon for iOS produces:
assets.jsonis the manifest. It setspublicDirtopublic,commandtonpx open-assets render, atagslist built from your choices, and one collection per asset type.src/holds the starter templates. The screenshot is authored at 440×956 and the icon at 1024×1024.dist/is an empty folder for compiled CSS (for example Tailwind output). The starter screenshot already links../dist/styles.css; it is harmless if that file does not exist yet.public/is the empty shared assets folder..gitignorecontainsdist/,exports/andnode_modules/.
The generated screenshots collection exports at iPhone 6.9", 6.7", 6.5" and iPad 13". The icon collection exports at 1024, 180, 120, 87, 80, 60 and 40 px for iOS. Android and Web add their own sizes.
Preview in the dev server
npx open-assets devThe server starts on http://localhost:3200 (or the next free port) and opens your browser. Each collection is a tab; each template is shown at its source size. Edit src/screenshots/01-hero.html and save: the page reloads on its own. You can export single images from the UI as you iterate.
Render every size
Stop the server and run:
npx open-assets renderEach collection in this scaffold has one template, so its images land flat in a folder named after the collection, one file per export size:
As soon as a collection has two or more templates, the layout switches to exports/<collection>/<size>/<template>.png. See Outputs.
The render also writes assets.lock. Run render again and every image is skipped:
Done. 0 asset(s) rendered, 11 skipped (unchanged) in 0.0s.Use --force to re-render anyway. See The lockfile.
The exports/ folder is created relative to the directory you run the command from, not the project directory. If you run open-assets render ./marketing from the repo root, the images land in ./exports. Pass -o to choose a folder explicitly.
Next steps
- Tutorial: your first screenshot set builds a real three-screenshot set with a shared stylesheet and an Xcode app icon.
- Project structure explains every file in a project.
renderreference lists every flag.
Last updated on
Installation
Install the Open Assets CLI as a dev dependency or run it with npx. Covers the Node version requirement, the Chromium download and how to verify the install.
Tutorial: your first screenshot set
Build a three-screenshot App Store set with a shared stylesheet, render it at iPhone 6.9 and 6.7 inch sizes, and write an app icon into an Xcode asset catalog.