Shell alias and editor setup

A few minutes of setup makes the daily loop (edit, preview, render) faster.

Shell aliasCopy Anchor Link

Add an alias to your shell profile:

echo 'alias oa="npx open-assets"' >> ~/.zshrc && source ~/.zshrc

Use ~/.bashrc if you use bash. Then:

oa dev
oa render
oa validate

npx resolves the project's local install first, so the alias still uses the version pinned in each project.

package.json scriptsCopy Anchor Link

The example projects wrap the CLI in scripts so nobody has to remember flags. This is the Skimmer example's package.json, which compiles Tailwind next to the dev server:

{
  "scripts": {
    "dev": "concurrently \"npx @tailwindcss/cli -i src/styles.css -o dist/styles.css --watch\" \"npx open-assets dev\"",
    "build:css": "npx @tailwindcss/cli -i src/styles.css -o dist/styles.css --minify",
    "render": "npm run build:css && npx open-assets render"
  },
  "devDependencies": {
    "@open-assets/open-assets": "^0.5.1",
    "@tailwindcss/cli": "^4.2.0",
    "concurrently": "^9",
    "tailwindcss": "^4"
  }
}

Without Tailwind it is simpler:

{
  "scripts": {
    "assets:dev": "open-assets dev",
    "assets:render": "open-assets render"
  }
}

Then point the manifest's command field at the script so agents and automation run the same thing:

{
  "command": "npm run render"
}

command is informational: Open Assets never runs it. Tools and agents read it to know how the project renders.

Useful environment variablesCopy Anchor Link

Set these in your shell or CI instead of repeating flags. CLI flags win over environment variables.

Full list: Environment variables.

Preview on your phoneCopy Anchor Link

Bind the dev server to all interfaces and open it from a phone on the same network:

npx open-assets dev --host 0.0.0.0

Visit http://<your-computer-ip>:3200.

Editor tipsCopy Anchor Link

• Templates are ordinary HTML and CSS, so your editor's HTML, CSS and Tailwind tooling works unchanged.
• Keep the dev server running in a split terminal. It watches the template folders and publicDir and reloads the preview on save.
• Run open-assets validate after editing assets.json to catch missing template files and broken localization files.

.gitignoreCopy Anchor Link

open-assets init writes dist/, exports/ and node_modules/ to .gitignore, and the example projects do the same. Commit assets.json, your templates, public/ and assets.lock. See Project structure for when you might commit exports/ instead.

Next stepsCopy Anchor Link

• Concepts
• Claude Code setup