Overview

ProtVista is a web component — a custom HTML element, <protvista-uniprot> — that draws protein sequence features as horizontal tracks aligned to the amino-acid sequence: domains, variants, binding sites, structure coverage, AlphaFold confidence, and more. You give it a UniProt accession (a protein identifier such as P05067) and, optionally, a config describing which tracks to show and where their data comes from.

Because it’s a standard custom element, it drops into any page — plain HTML, React, Vue, Angular — with a <script> tag and no build step. You do not need to know the underlying rendering library or name any internal components: you describe what to show in a small YAML or JSON document, and ProtVista resolves that to the right components, data adapters, and layout for you.

Who it’s for

• Scientists who want to look at a protein without writing code — open the playground, type an accession, and explore.
• Bioinformaticians bringing their own annotations — load a CSV, TSV, JSON, or BED file alongside the live UniProt tracks. See Load your own data.
• Developers embedding the viewer in an application — add the element, author a config, and wire up events. Start with Embed the viewer.

Find your path

• New here? Take the end-to-end Tutorial — from an empty page to a custom, themed viewer in four steps. For the pieces on their own, see Embed the viewer then Author a config.
• Bringing your own data? Go straight to Load your own data.
• What each track type draws? See Built-in track kinds.
• Config vs. what a provider supplies? Read Configuration vs data.
• Validating configs or working at scale? Point your editor at the config JSON Schema.
• Beyond the built-ins? See the Escape hatches.
• Something not rendering? Check Troubleshoot errors.

Tools & resources

• Playground — edit a config live, see it render, share it via a link.
• Playground — dev examples — the same, seeded with tricky proteins for eyeballing edge cases.
• Starter Kit — a no-build template repository to copy and go.
• Feature record schema — machine-readable schema for bring-your-own data.
• Source & issues — component source, schema, and tracker.

Licensed under CC BY 4.0.