@salesforce-ux/design-system-previewer NPM

Design System Previewer

This previewer is intended to work with the Salesforce Lightning Design System.

Installation

npm install @salesforce-ux/design-system-previewer --save-dev

Usage

const createPreviewer = require('@salesforce-ux/design-system-previewer');

const previewer = createPreviewer({
  // where are your static assets
  publicPath: {
    '/assets': [ path.resolve(__dirname, '../assets') ] // this uses express.static under the hood
  },
  // where is your css?
  cssUrl: '/assets/styles/index.css',
  // get me some comments as a string
  getComments: (done) => done(null, "all comments in system"),
  // get me some markup for a component/variant
  getMarkup: (component, variant, done) => done(null, "get Component/Variant markup"),
});

previewer.listen(3003, ({ server, emit }) => {
  // when your css changes
  emit('style');

  // when your markup changes
  emit('markup');

  // when your annotations changes
  emit('comments');

  console.log(`Previewer available at: http://localhost:${server.address().port}/preview`);
});