GelFigure

Download one file, open it in your browser, and start making your figure. No installation, ZIP extraction or GitHub account is needed.

1. Download GelFigure-v0.6.14.html (under 1 MB). Save it to your Desktop or Downloads folder.
2. Double-click the downloaded file. It opens in your browser. If a text editor opens instead, right-click → Open with → Firefox, Chrome, Edge or Safari.
3. Click “Choose file” and select your gel image. Check the detected gel type, lanes and marker, click the lane names to edit them, then choose Export PNG.

That one HTML file is the complete tool, including its layout and image-processing code. Keep it on your computer or send the same file to a colleague. Once downloaded, it works without an internet connection.

Get the right file: choose the release attachment named GelFigure-v0.6.14.html, not the repository's index.html, Source code (zip) or Source code (tar.gz). You do not need Code → Download ZIP. If you reach the release page, expand Assets and click the file ending in .html.

Keep your work: use File → Save project before closing. On a phone it is under ⋯ (or Export → Save project). Your .gelfig file contains the original image and annotations; reopen it in GelFigure to continue.

Prefer the website? Open GelFigure online. On phones and tablets, use this link in your browser; an HTML attachment preview in a messaging app may not run the tool.

Need help? See the illustrated download and opening guide or press ? inside the app.

Drop in the image from your gel imager or scanner. GelFigure works out whether it is a DNA (agarose) or a protein (SDS-PAGE) gel, straightens and crops it, finds the lanes, identifies the ladder and labels its band sizes in bp or kDa. You type the lane names on the figure and export. Everything happens in the browser; gel images stay local, nothing is installed.

• Features
• Quick start
• Versions
• Privacy
• Supported input
• What is detected automatically
• Exports
• Image integrity
• Built-in ladders
• Browser support
• Known limitations
• Development
• Contributing · Citing · Acknowledgements · License

clearer layout settings and release history. Layout is a normal, expanded sidebar section (Settings on a phone). A short notice introduces a new version once in this browser, without blocking work; importing an image dismisses it. Open Release history from the start page, File, Help or phone ⋯ to see bilingual highlights for each version and the version currently running. The summaries work offline; remembering a seen version requires available browser storage. Development builds are labelled explicitly.

red annotations. Click an arrow/symbol, region box, side bracket or side text and choose Colour → Red. Box frames, labels and enlarged copies share the colour; group labels colour their line and condition labels colour the whole row. Lane names support red on a selection or the whole name using the inline toolbar. Click a marker label to colour one size or that marker's labels/ticks/unit. Default restores the normal colour (white boxes on dark gels). Colour is saved in projects/history and applicable style fields, and retained in PNG, TIFF, SVG and editable PowerPoint. A grayscale gel with red annotations exports as RGB TIFF; source pixels and detection are unaffected.

feedback and support are always available. Use Feedback / support in the desktop top bar, or ⋯ → Feedback / support / Star on a phone, even before loading an image. Export reminders return on the next export after being closed. The online form needs no GitHub account: FormSubmit forwards your message, optional reply email and app version to the author. Failed submissions keep your text. Local HTML files offer copy/open-online fallback because this service requires a web page. Alipay support and GitHub Stars are optional. Hidden marker-label columns no longer create a blank strip beside arrows.

individual lane names and text formatting. Shared name settings remain the default. Click a name, expand Individual lane settings and enable custom size/angle only when needed; untick it to follow the shared settings again. Select text and use Upright, Italic, x² or x₂; with no selection the action applies to the whole name. Clear restores the shared face. Formatting travels with projects/styles and stays editable in PowerPoint. After exporting, you can leave feedback or optionally support the author via the provided Alipay QR. Viewing or saving the QR does not replace your figure; payment is never opened automatically.

Lane-name angles and header layout. Export stays at the upper right on smaller desktop windows. Use Name angle above the figure for presets or any whole-degree angle from 0–90°. Auto (default) keeps the existing spacing rule; selecting it again restores automatic layout. The choice is saved with projects and styles and used by every export format.

Direct lane and marker editing. Drag the red frame to crop. Lane count and Re-detect lanes + markers in crop are directly available on the left (Settings on a phone). Drag the ↔ end guides for even spacing, or a middle guide to shift the grid. Re-detection runs both stages, preserves confirmed marker choices/manual anchors and respects removed marker roles; simply cropping does not reclassify lanes. Naming, bulk paste and typography live beside the figure. Select a marker lane and ladder, then Detect bands here to align only that lane. A compact reference card stays beside the original image: preview a model, select a size and click its actual band. Click a marker number on the figure for font, show/hide and delete controls. Hiding keeps calibration; deleting removes the anchor too. Predicted bands without a detected match are hidden initially; check the result against your image. Existing projects retain their saved geometry; edits are undoable.

Recent projects. Open locally cached work from the top bar, File menu, or ⋯ → Recent projects on a phone. Importing another gel keeps the previous project. Rename, delete or restore its crop, annotations, fonts, colours and all exposures without re-detection. The old single draft migrates automatically; storage failures are reported. History belongs to this browser and can disappear when site data is cleared. Save a .gelfig backup for the selected exposure and its annotations, and keep the other original exposure files separately. Cached images are not embedded in the downloaded HTML.

Local marker library. Custom models added manually or imported from projects/templates are cached with their favourites, independently of gel images. Reopening the same site/file in the same browser restores them before detection. Existing local models migrate automatically; the Marker section reports whether saving succeeded. If one storage method fails, an independent backup is tried. Back up marker library / Import marker library lets you move models to another browser, computer or offline HTML version; it merges models without replacing existing definitions and contains no images. Clearing browser data or private browsing can still remove local caches, so keep the small JSON backup.

• Fully automatic first draft: straightening (±15°), crop, lane detection, ladder identification and size labels, linear contrast.
• DNA and protein gels: the gel type is recognised on import (colour, band width, band count, migration curve) and the matching mode opens — ladder library, tolerances and units (bp / kDa). A switch at the top of the Image panel overrides the guess without losing names, groups or arrows.
• Edit on the figure itself: click a lane name and type, Enter jumps to the next lane; drag across lane names to draw a group line; click cells to cycle + / −. IME-safe for Chinese, Japanese and Korean input.
• Lanes numbered by well: cropping only selects which wells are shown, so names, markers and groups are never lost when you change the crop.
• Annotations papers use: group lines, +/− rows, region boxes (optionally enlarged beside the figure), side brackets for smears or (Ub)n, side text for the stain or antibody, and * / # / † marks for non-specific bands or other products.
• Labels that never collide: group labels too wide for their line wrap (or shrink, or stay on one line — your choice) and otherwise move up a row; Shift+Enter breaks a label by hand; any label, arrow or box can have its own font size.
• System-font choices: Fonts & sizes above the figure offers Arial, Times New Roman, Helvetica, Calibri and Cambria. Measurement, wrapping, raster/SVG/PPTX exports and saved projects/styles follow the selection. No font files are downloaded or embedded; devices without the chosen font use a substitute, including when opening editable SVG/PPTX files elsewhere.
• Compact marker-unit headings: bp/kb/kDa stay beside the gel's upper edge instead of moving above the condition matrix. Condition rows keep their normal spacing; extra clearance is added only when a label would collide.
• Grayscale by default, original colour available: newly imported images start in grayscale. For stained protein gels or coloured markers, choose Image → Original colour to retain source colours. Switching display leaves detection and annotations unchanged; saved projects reopen in their saved mode. Original-colour mode keeps rotation/crop without grayscale contrast, inversion or gamma. PNG, SVG, PPTX, uncropped images and RGB TIFF follow the chosen display mode.
• Target-band arrows with sizes: click a band; the arrow snaps to it and its size is estimated from the marker(s). Sizes outside the ladder, or where two markers disagree by more than 10 %, are marked ≈.
• Several exposures at once: drop all exposures of one gel; the best one (least saturation, best signal-to-noise) is chosen, and you can switch with all annotations kept.
• Rotation keeps annotations in place: lanes, bands, arrows and the crop box rotate with the image.
• No need to straighten images elsewhere: mirror horizontally or vertically, and turn 90° either way, inside the Image section. Mirrors and 180° carry every annotation with the image; a 90° turn re-detects the lanes in their new direction and keeps the names you typed, in order.
• Lane names hug the gel: condition rows stack above them, so adding rows never pushes a marker lane's name away from the image. The older order (conditions nearest the gel) is one switch in Layout.
• Side text anywhere along its edge: left, right and below-the-gel captions can be moved along the edge, by slider or by dragging them on the figure.
• Lane removal with splice marks: select a lane and press H; a splice gap or line is added and recorded. Empty lanes are suggested for removal (never removed silently). Delete / ⌫ deletes a wrongly detected lane.
• Live lane alignment: change the count on the left (Settings on phones; include marker and empty lanes), then drag the two end guides; the middle follows evenly. Turn off linking or Alt-drag for an independent correction. The visible crop re-detection button finds both lanes and markers.
• Pre-flight check before export: camera saturation, contrast clipping, effective resolution below 300 dpi, tiny fonts, extrapolated sizes, with one-click fixes.
• Reproducible: project files (.gelfig) contain the original image and every setting; reusable style templates; local project history can restore work after a reload when browser storage is available.
• Works on a phone: a bottom bar switches between Image, Figure and Settings; Export offers every format and resolution. Pinch to zoom the image, tap a lane to nudge, cut or delete it. Double-tap an existing marker lane to open its editor; add lanes explicitly with + Lane. Marker panels can be moved by dragging the title. An exported PNG opens as a picture you long-press to save to Photos (this also works inside WeChat, which cannot download files) or send through the share sheet.
• Bilingual interface: English and Chinese, switchable at any time. Figures are always in English.

The current version is 0.6.14 (whole-image orientation, gel-hugging lane names and freely placed side text). The 0.6 series adds protein gels, annotations, and mobile support. 0.6.3 ships a single-file offline build (GelFigure-<tag>.html) for double-click use; 0.6.4 reworks the phone layout (bottom bar, export sheet with every format, long-press to save, touch editing); 0.6.5 keeps group labels from overlapping (wrap / shrink / one line), adds typed line breaks and a font size per label. 0.6.7 added editable PowerPoint export with adjustable image crops. 0.6.8 added original colour, system fonts and compact marker-unit headings. 0.6.9 added local project history and automatic recovery. 0.6.10 simplified lane/marker editing and added marker-library caching and grayscale imports. 0.6.11 kept desktop exports right-aligned and added adjustable lane-name angles. 0.6.12 added per-lane text formatting, in-app feedback and support, and compact arrow spacing. 0.6.13 added red annotations, an expanded layout section and local release history. Earlier versions are kept as tags and branches if you need to go back: v0.6.13 (release/0.6.13), v0.6.12 (release/0.6.12), v0.6.11 (release/0.6.11), v0.6.10 (release/0.6.10), v0.6.9 (release/0.6.9), v0.6.8 (release/0.6.8), v0.6.7 (release/0.6.7), v0.6.6 (release/0.6.6), v0.6.5 (release/0.6.5), v0.6.4, v0.6.3, v0.6.2, v0.6.1, v0.6.0 and v0.5.0.

GelFigure is a static web page; image processing does not use a server. Images are decoded and processed by JavaScript in your browser, and results are saved by your browser's own download mechanism.

The Content Security Policy allows the app’s own resources and one explicitly configured feedback endpoint. Image processing, editing and export do not upload gels. Only clicking Send feedback submits the text you wrote, optional reply email and app version through FormSubmit; no image, filename, lane names or project is attached automatically. Feedback requires internet access. Sponsorship/Star links open only when clicked. Preferences, custom ladders and autosaved projects (including images, annotations, history and all exposures) stay in browser-local storage. Delete individual projects from Recent projects or clear the browser's site data. Cached data is not written into the downloaded HTML.

Both bright-bands-on-dark (EtBr, SYBR, fluorescence) and dark-bands-on-light (Coomassie, scanned films) images are handled. One Invert checkbox swaps black and white, and the panel always says what the figure currently looks like.

The Layout section shows the effective resolution of the gel itself (gel pixels ÷ printed width). If it is below 300 dpi, GelFigure tells you the largest width that keeps 300 dpi and offers to apply it. Total figure width can be set directly to a journal column (85 / 120 / 180 mm).

GelFigure follows common journal image policies (e.g. Nature, PLOS, JBC; see Rossner & Yamada, J Cell Biol 2004, "What's in a picture?"):

• Only linear, whole-image adjustments. Gamma is locked at 1 unless explicitly unlocked, and is then reported in the legend notes.
• Camera saturation (the raw data is already clipped, so you need to re-image) is reported separately from contrast clipping (caused by the display settings and fixable).
• Removed lanes get a visible splice gap or line, and suggested legend text is generated. Never splice lanes from different gels into one panel.
• Every export carries a processing summary; the uncropped image and the original file can be exported for the supplement.

GelFigure helps you comply, but you remain responsible for following your journal's policy.

DNA ladders (23): Thermo Scientific GeneRuler: 1 kb, 1 kb Plus, 100 bp, 100 bp Plus, 50 bp, DNA Ladder Mix, Low Range, Ultra Low Range, Express · NEB: 1 kb, 100 bp, 1 kb Plus · Takara: DL2000, DL5000, DL15000 · TransGen: Trans2K, Trans2K Plus, Trans2K Plus II, Trans5K, Trans15K · Tiangen: Marker D2000 · Yeasen: GoldBand 1 kb, GoldBand 100 bp Plus.

docs/ladders.md lists each one with its catalogue number, band count and reference bands — and the few whose band sizes are identical, which no algorithm can tell apart (mark the one you use as a favourite).

Protein ladders (41, kDa, apparent molecular weights): Bio-Rad Precision Plus (Dual Color, All Blue, Kaleidoscope, Unstained, Dual Xtra) · Thermo / Invitrogen (PageRuler, PageRuler Plus, Unstained, Spectra Multicolor, Novex Sharp, SeeBlue Plus2) · NEB · Abcam · GenScript · Yeasen · Epizyme · Beyotime · TransGen · Solarbio · Sangon. Prestained sizes are calibrated in a Tris-glycine system and shift with gel percentage and buffer, so a size read from one is an estimate; the pre-flight check reminds you to write "apparent molecular weight" in the legend.

Any other ladder can be added under Marker → Custom ladder; custom ladders travel inside style and project files. To add a ladder for everyone, see CONTRIBUTING.md.

Current Chrome, Edge, Firefox and Safari 16.4+ on Windows, macOS and Linux. The test suite runs in Chromium, Firefox and WebKit on every change.

When the downloaded HTML is opened directly from disk, some browsers disable IndexedDB for local files; editing and export still work, but local project history may be unavailable. Use the online version or "Save project" if you need it.

If the page looks like plain text and unstyled buttons, its stylesheet has not loaded or page styles have been disabled. Reload with Ctrl+Shift+R (Command+Shift+R on macOS). For offline use, download the single-file HTML from Releases, or extract the whole ZIP and keep css/ and js/ beside index.html; the repository's index.html alone is not a standalone app.

If browser storage is blocked or full, the app can still edit and export. Preferences and custom ladders stay in the current tab only; use Save project before closing. Local project history and automatic recovery depend on the browser allowing IndexedDB.

• Automatic detection has been validated on DNA agarose gels, Coomassie-stained SDS-PAGE gels and synthetic gels. On a crowded protein gel whose lanes touch, lane detection can merge neighbours — set the lane count in the left panel (Settings on phones), then align the two end guides. If detection fails on your images, please open an issue.
• Band quantification (densitometry) is not supported.
• Bio-Rad .scn / .1sc and other proprietary formats must be exported to TIFF first. BigTIFF is not supported.
• 16-bit PNGs are read as 8-bit by browsers.

This section is for contributors editing the source. To use GelFigure, follow the single-file download steps above. Source checkouts keep css/ and js/ beside index.html; those files must stay together.

No build step and no dependencies: the app is plain HTML, CSS and JavaScript loaded with ordinary <script> tags, so it also runs from file://.

index.html          the page
css/style.css       styles
js/storage.js       optional preferences with in-memory fallback
js/i18n.js          interface language (L('中文', 'English') pairs)
js/tiff.js          TIFF decoder            js/engine.js    image analysis
js/ladders.js       ladder library          js/render.js    figure layout (SVG)
js/export.js        PNG / TIFF / SVG / logs js/app.js       state, pipeline, undo, projects
js/editor.js        raw-image canvas        js/ui.js        side panel and top bar
js/figedit.js       editing on the figure   js/demo.js      synthetic test gel
js/uitest.js        interaction self-test   test/test.html  engine self-test
tests/run.mjs       runs both self-tests in Chromium, Firefox and WebKit

Run the tests:

npm install
npx playwright install chromium firefox webkit
npm test                      # all three engines
npm test -- --browser=chromium

Or open test/test.html ("allOk": true) and index.html?demo=1&uitest=1 in a browser.

Bug reports, gel images that break detection (only if you are allowed to share them), new ladders, translations and code are welcome. See CONTRIBUTING.md.

If GelFigure helped with a publication, please cite it; see CITATION.cff or use GitHub's "Cite this repository" button.

GelFigure is designed and developed by poplarity.

Development is supported by API tokens provided by Zhao Bowen (@zhober).

MIT