Protein sequence workbench

Build with Vlak
Sequence workbenchTeaching fragment / local drafts
Nonfunctional teaching fixture

Teaching fragment 01

Reference copy
Concept viewIllustrative ribbon · no structure prediction
Draft sequence · 18 residues0 differences from reference

Arrow keys move between residues. Select a residue to edit it.

Sequence inspection, with explicit limits

This repeated fragment has no assigned biological function. The ribbon is an illustration and stays unchanged when the sequence changes.

Residue 6 · Glycine
Saved variant

Serine comparison

Exact sequence differences01

Compared with the teaching reference. No scientific score is calculated.

Changed positions
PositionReferenceVariant
11AS
Saved sequenceGASGAGGASGSGGASGAG
Not reviewed
Local draft

Edit the fragment

Residue 6G

Glycine

Replace residue 6
1–48 residues. Whitespace is ignored and letters are read in uppercase.

Saving creates a new local record. Existing variants remain unchanged.

18 residues
Local teaching fixture · no design model connected2 saved records

Inspect a residue → edit and save a variant → compare and review

View source
About this download

A standalone Vite and React project using Vlak 0.5.0. Extract the ZIP, open its folder, then run npm install and npm run dev. Requires Node 22.12 or newer.

The sequence is a fictional, nonfunctional teaching fixture. Its ribbon is an illustration, not a calculated structure. No folding model, scientific scoring, synthesis or design service is connected.

Installation and base examples

Inside the interface

A workbench for discussing sequence editing with a deliberately nonfunctional toy sequence. Inspect a residue, edit the sequence, and save a local variant. Comparison shows exact substitutions, additions, and removals; constraint review reports only the stated length and character rules.

The short repeated sequence is a fictional, nonfunctional teaching fixture. The ribbon is illustrative and does not represent a calculated structure. Edits and review records are local; no folding model, scientific scoring, synthesis, or design service is connected.

Watch the 20-second walkthrough

A short walkthrough of the working protein sequence workbench study.

Components used

Use this as a starting point

Build with Vlak

Install the components, add the stylesheet, and bring your own content. The study’s source shows how the pieces fit together.

React componentsCSS includedMIT licensed

Download the Protein sequence workbench starter

Install the package
npm install @noorddev/vlak-react
import "@noorddev/vlak-react/css";
Installation guide View study source

Start with your coding agent

A ready-to-use brief with this study, Vlak’s components, and the design guide.

Component modifications

  • Select, Input, and Textarea provide residue replacement, variant naming, and direct sequence editing. Button saves local drafts and review notes with truthful feedback.
  • A bespoke residue grid uses native 44px buttons and arrow-key navigation. The accompanying ribbon is a labelled static illustration, with no claim that edits predict a new structure.
  • Card and Toggle group organize saved variants, exact sequence differences, and explicit rules. Narrow layouts give the sequence, variant shelf, and editor separate focused screens.
  • Below a 640px specimen width, Sequence, Variants, and Edit become separate destinations. Residue controls stay 44px, the editor scrolls independently from its save action, and a saved variant opens the comparison screen. Back retains the current sequence and returns focus to the selected residue.