Create living prototypes with code components.
Failed to load latest commit information.
.circleci chore: remove mac os experiments Sep 17, 2018
.github docs: add pull request template Aug 21, 2018
.vscode chore: add the following to vscode recommended extensions (#609) Sep 17, 2018
docs docs: restructure for overview Sep 11, 2018
scripts build: remove copy command for none existing files (#485) May 30, 2018
src fix: honor back/next state on page drops correctly (#636) Oct 11, 2018
.editorconfig docs: adapt documentation to latest changes Jun 1, 2018
.gitattributes fix: set default linebreak for ts files Dec 24, 2017
.gitignore chore: exclude DS_Store files from version control Jun 1, 2018
.npmrc chore(system): add config to always save npm packages w exact version Apr 9, 2018
.prettierignore chore: simplify commit convention tooling Dec 21, 2017 chore(release): 0.8.1 Oct 25, 2018 docs: adapt documentation to latest changes Jun 1, 2018 docs: update broken important resources in Oct 11, 2018
LICENSE docs: update license year May 27, 2018 feat: support any npm package exporting react components (#613) Sep 19, 2018
commitlint.config.js chore(commitlint): increase commit header length to 100 Apr 6, 2018
jest.config.js refactor(preview): include new styles May 24, 2018
package-lock.json fix: devtools dependencies needed at runtime Nov 3, 2018
package.json fix: devtools dependencies needed at runtime Nov 3, 2018
patternplate.config.js docs: adapt documentation to latest changes Jun 1, 2018
renovate.json chore(system): add renovate label to PRs from renovate Apr 10, 2018
tsconfig.json fix: handle ts 3.1 fallout Sep 10, 2018
tslint.json feat: implement map deletions sync Sep 10, 2018
webpack.config.js chore: move to optional builtin hot reloader Sep 10, 2018
webpack.renderer.js chore: enable hmr for renderer Sep 10, 2018
yarn.lock chore: move to optional builtin hot reloader Sep 10, 2018

Meet Alva

Alva is a radically new digital design tool built for cross-functional product teams.

Alva works with your production frontend components, adding up-to-date, responsive, and interactive designs to your living styleguide.

You can start with a minimal set of components to sketch concepts and do fast iterations with your development team to create and enrich components, from atoms to modules and entire pages and a full-featured styleguide. But you can also add Alva designs to existing style guides.

Alva focuses on the arrangement and content editing of pages, while it leaves the implementation of the components to the developers, providing a single source of truth for both.

There is no such thing as out-dated and static PNG screens, as the current version of both the design models and the component implementation always render to up-to-date web pages instead.


For the full list of all releases, see Github

  • Visit
  • Scroll to Download Alva and click on it
  • Wait for the download to complete
  • Double click the downloded file
  • Follow the instructions to install Alva


Getting Started with Alva

👩‍🎓 Audience: Everyone

  • Follow the installation instructions
  • Start Alva
  • Click "Create A New Alva File"
  • Drag some elements from the pattern pane (bottom left) to the element pane (top left).
  • Download the example file from
  • Open it by hitting Cmd+O, then select the downloaded Example.alva
  • Notice how the the pattern pane has new entries? That is a production-level pattern library embedded in Example.alva!

Connect a Pattern Library to your Project

👩‍🎓 Audience: Everyone

  • Start Alva
  • Click "Create A New Alva File"
  • Click the "Connect" button (top right)
  • Select a directory that contains a compatible pattern library
  • Alva adds all found components to the pattern list (bottom left)

ℹ️ Alva currently supports a limited set of pattern libraries. See Pattern Library Requirements for details.

Consult with your team members if your library fulfills the requirements.

Use the Alva DesignKit if you don't access to a compatible pattern library.

Pattern Library Requirements

See Alva DesignKit for a compatible project setup

  • Language: TypeScript
  • View Library: React
  • Must be a valid NPM package exporting components via a central entry point

ℹ️ We plan to support more technologies and setups in the future.

Pattern Requirements

  • Language: TypeScript

  • View Library: React

  • Must be reachable from the central package entry point

  • Must be exported via export

  • Must by typed as React.SFC, React.ComponentClass, React.PureComponent, React.StatelessComponent, React.SFC, React.ComponentType

  • Must be built with declarations, so a index.d.ts is available

  • In order to accept children elements in Alva, the children prop has to be typed explicitly

  • Supported property types are

    • string
    • number
    • boolean
    • enum

Pattern Meta Data


Pattern Property

  • name: TSDoc @name [name] - Used in the property pane as input label
  • default: TSDoc @default [value] - Preset value for this property when creating new elements
  • description: TSDoc @description [description] - Used as help text in property pane
  • example: TSDoc @example [value] - Example used as input placeholder if applicable
  • ignore: TSDoc @ignore - Do not show this property
  • slot: TSDoc @slot - Force alva to consider the property as Slot
  • href: TSDoc @href - Force alva to consider the property as href

Feel free to dive in! Open an issue, submit a Pull Request or let’s discuss what should be next. ❤️

Alva follows the Contributor Covenant Code of Conduct.

Proudly powered by SinnerSchrader.

Copyright 2017-2018. Released under the MIT license.