---
nav_order: 1
permalink: /
# Keep this in sync with ../README.md
---

# UIFactory

<!-- markdownlint-disable no-inline-html -->
<!-- Generate Favicon from image using https://favicon.io/favicon-generator/ -->
<p align="center"><a href="https://uifactory.gramener.com/"><img src="img/uifactory.svg" alt="UIFactory Logo"></a></p>

[UIFactory](https://uifactory.gramener.com/) is a small, elegant web component framework.

![UIFactory example](img/uifactory.gif)

**UIFactory builds re-usable web components**. These can be used with plain HTML, Angular, React, Vue, or any other web application framework.

- **It's small**. <4 KB compressed
- **It's compliant** with the Web Components standard. Works on all modern browsers
- **It's easy to learn**. Write any HTML, CSS and JS and wrap it in a `<template>` componentize it.
- **No compilation**. No server. No hosting. Just save in a HTML file.

## Learn

<div style="display:flex;text-align:center">
  <a href="quickstart/" style="margin:1rem;width:15rem;border-radius:0.5rem;box-shadow:2px 2px 4px 2px rgba(0,0,0,0.5)">
    <h2>Quickstart tutorial</h2>
    <p><img src="img/quickstart.svg"></p>
    <p>Just 15 minutes</p>
  </a>
  <a href="guide/" style="margin:1rem;width:15rem;border-radius:0.5rem;box-shadow:2px 2px 4px 2px rgba(0,0,0,0.5)">
    <h2>Feature Guide</h2>
    <p><img src="img/guide.svg"></p>
    <p>Covers everything</p>
  </a>
</div>

## Use pre-built components

UIFactory ships with these ready-to-use components:

- [`<comic-gen>`](comic-gen/) renders comic characters from data
- [`<md-text>`](md-text/) converts Markdown to HTML
- [`<network-chart>`](network-chart/) renders network graphs
- [`<svg-chart>`](svg-chart/) creates data-driven infographics from SVGs
- [`<vega-chart>`](vega-chart/) renders charts using Vega

## Contributing

Please read the [Contributing Guide](https://github.com/gramener/uifactory/tree/master/CONTRIBUTING.md) for how you could contribute.

## Releases

[See all UIFactory releases](https://github.com/gramener/uifactory/releases)

## License

Copyright © Gramener.

Licensed under the [MIT license](https://github.com/gramener/uifactory/tree/master/LICENSE).

## Support

UIFactory is tested in Chrome, Firefox, Edge, and Safari. IE is not supported.

Please raise issues and feature requests at <https://github.com/gramener/uifactory/issues>.