You can quickly use and configure Mirador by remixing the mirador-start Glitch.
We recommend installing Mirador using a JavaScript package manager like npm or yarn.
$ npm install mirador
# or
$ yarn add mirador
If you are interested in integrating Mirador with plugins into your project, we recommend using vite to integrate the es version of the packages. Examples are here:
https://github.com/ProjectMirador/mirador-integration
If you want to simply embed Mirador in an HTML page without further customization, include the Mirador UMD build:
<script src="https://unpkg.com/mirador@latest/dist/mirador.min.js"></script>
More examples of embedding Mirador can be found at https://github.com/ProjectMirador/mirador/wiki/M3-Embedding-in-Another-Environment#in-an-html-document-with-javascript.
For help with adding a translation, see src/locales/README.md
Mirador local development requires nodejs to be installed.
- Run
npm install
to install the dependencies.
$ npm start
Then navigate to http://127.0.0.1:4444/
var miradorInstance = Mirador.viewer({
id: 'mirador' // id selector where Mirador should be instantiated
});
> miradorInstance
{ actions, store }
Add a window:
store.dispatch(actions.addWindow());
To focus a window run:
store.dispatch(actions.focusWindow('window-1'))
store.getState()
We use Vitest to run our test suite.
$ npm test
You can see the helpful Vitest UI in your browser by running Vitest with the --ui
flag. To pass the flag through to npm run the following:
$ npm test -- --ui
You can run Vitest without the additional linting and size checks in our npm test
command. You can also test a single file:
$ npx vitest __tests__/integration/mirador/tests/sequence-switching.test.js --ui
$ npm run lint
The following browser extensions are useful for debugging a local development instance of Mirador:
To debug the test suite, run:
$ npm run test:debug
then spin up a nodejs inspector client and set some breakpoints. See here for a guide to debugging with Chrome DevTools.