https://github.com/formio/formio-viewer
Landing page viewer for forms and wizards within Form.io
https://github.com/formio/formio-viewer
Last synced: about 1 year ago
JSON representation
Landing page viewer for forms and wizards within Form.io
- Host: GitHub
- URL: https://github.com/formio/formio-viewer
- Owner: formio
- License: mit
- Created: 2016-01-28T13:53:40.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2025-06-11T16:09:38.000Z (about 1 year ago)
- Last Synced: 2025-06-11T17:53:20.439Z (about 1 year ago)
- Language: HTML
- Homepage: https://formview.io/#/examples/example
- Size: 210 MB
- Stars: 34
- Watchers: 13
- Forks: 46
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: Changelog.md
- License: LICENSE
Awesome Lists containing this project
- awesome-starred - formio/formio-viewer - Landing page viewer for forms and wizards within Form.io (others)
README
# formio-viewer
> A lightweight [Form.io](https://github.com/formio/formio) application that renders form submissions as HTML before being converted to PDF.
This simple [Form.io](https://github.com/formio/formio) application is used by the [PDF Server](https://help.form.io/deployments/pdf-server) to generate PDFs from form submissions. Using this library, you can customize the submission PDFs that are generated by the PDF server.
## Getting Started
Becuase formio-viewer is mounted by the [Form.io PDF Server](https://help.form.io/deployments/pdf-server), this library is not available via a package manager such as NPM or yarn. To use it, clone the repository.
```bash
# if using SSH
git clone git@github.com:formio/formio-viewer
# if using HTTPS
git clone https://github.com/formio/formio-viewer
```
You can now install dependencies as normal.
```bash
# if using npm
npm install
# if using yarn
yarn
```
Once you've made the desired modifications to the viewer, build the application.
```bash
# if using npm
npm run build
# if using yarn
yarn build
```
You can now mount the dist folder at the endpoint of your choice and point the PDF Server to it for generating PDF submissions either by adding the URL of your custom viewer to the Form Settings (on a form-by-form basis) or by setting the PDF Server's FORMIO_VIEWER environment variable to the URL of your custom viewer.
PLEASE NOTE that any modification of this library beyond adding basic HTML/CSS and/or custom assets is an advanced use case and is not recommended for users just starting out with the Form.io platform.
## Example Usage
In this example, we'll add the Form.io logo to all of our PDF submissions.
First, we'll update `index.html` to include the logo. Since formio-viewer currently uses Bootstrap 4.x by default, we'll use Bootstrap's built in [layout utilities](https://getbootstrap.com/docs/4.0/utilities/flex/#enable-flex-behaviors) and [navbar class](https://getbootstrap.com/docs/4.0/components/navbar/#brand). Note that the logo is being served from the `assets` directory.
```html
Our Custom
Viewer!
```
After building our new viewer, we'll mount a simple HTTP server in the `dist` directory to check our work.
```bash
yarn build && cd dist && python -m http.server
```
Load a form into the text input (e.g. https://examples.form.io/example) and click "Show Form." You should see our new navbar component! Now each PDF submission generated using your custom viewer will contain this component.