DEV Community

Cover image for Building a CRISPR/Prime Editing Planner with Next.js + FastAPI
Omnis Coder
Omnis Coder

Posted on

Building a CRISPR/Prime Editing Planner with Next.js + FastAPI

#programming #crispr #nextjs #fastapi

Designing CRISPR and Prime Editing experiments usually means jumping between half a dozen tools, copying sequences around, manually checking GC content, validating coordinates, and hoping you didn’t introduce an off-by-one error. It’s slow, tedious, and surprisingly easy to f*** up.

So, we built something better.

Helix Edit Planner

A fast, browser-based CRISPR/Prime Editing design tool powered by a Next.js frontend and a FastAPI backend:

Helix Edit Planner

Paste a sequence, describe the edit, and the planner generates

  • Candidate CRISPR guides
  • Prime Editing designs (PBS, RT templates)
  • GC content, distances, PAM positions
  • Clear ASCII-style diagrams
  • Sanity checks and flags

All computed in real time.

Why build a planner at all?

Even basic CRISPR edits require a surprising amount of bookkeeping
| “Does this guide bind at the right offset?”
| “Is the PAM in the right position relative to the edit?”
| “What is the GC balance?”
| “Is this pegRNA even viable given the direction and sizes?”
| “Did I miscount bases around the edit?”

Doing this manually is a trap.

We wanted a tool that made CRISPR design feel like writing code, fast feedback, clear structure, self-contained validation.

Tech Stack Overview

Frontend: Next.js on Vercel

  • Instant feedback as the user types
  • Clean form inputs for target sequence + edit specification
  • Generates ASCII diagrams for guide binding and edit sites
  • Handles client-side validation before hitting the backend

Backend: FastAPI on Fly.io

The backend does the actual sequence logic.
Endpoints include:
/api/crispr – find candidate guides
/api/prime – compute prime editing RT/PBS designs
/api/flags – attach warnings and metrics

FastAPI made it easy to keep the models clean and the responses strictly typed:

class CrisprGuide(BaseModel):
    sequence: str
    pam: str
    start: int
    end: int
    gc_content: float
    strand: Literal["+", "-"]
Enter fullscreen mode Exit fullscreen mode

This structure alone removed half the bugs typical in ad-hoc CRISPR design tools.

How the system works (high level)

User Submits:

  1. a target sequence
  2. an edit specification (e.g., pos=123, ref=G, alt=A)
  3. CRISPR or Prime Editing mode

the planner computes:

  1. PAM scanning For example, in SpCas9 mode: NGG on the plus strand CCN on the minus strand

Each hit becomes a potential guide.

  1. Motif extraction + GC content
    A quick calculation:
    gc = (seq.count("G") + seq.count("C")) / len(seq)
    Helps detect unstable 20nt guides.

  2. Edit-to-guide distance rules

  3. Prime editing gets stricter:

  4. Peg must extend toward the edit

  5. RT must include the altered bases

  6. PBS must be reverse-complemented

This is where most off-by-one errors normally hide, and where automation helps the most.

  1. Diagram generation

We emit a small ASCII representation showing guide binding:

Users consistently say this is the most reassuring part.

Sample FastAPI snippet (Prime Editing core)

Here’s a simplified version of how we generate RT + PBS:

def build_prime_edit(seq, pos, ref, alt, guide):
    # RT template must start at the edit position
    rt_start = pos
    rt_end = pos + len(alt)

    rt = seq[rt_start:rt_end]

    # PBS is reverse complement of bases upstream of PAM
    pbs_source = seq[guide.start - 15 : guide.start]
    pbs = reverse_complement(pbs_source)

    return PrimeDesign(
        guide=guide,
        pbs=pbs,
        rt=alt + rt[len(ref):],
        edit_position=pos
    )
Enter fullscreen mode Exit fullscreen mode

The real implementation handles strand direction, longer templates, indels, GC balancing, and mismatch flags, but the structure is similar.

Why this matters (and who uses it)

This tool is useful for:

  • CRISPR/Prime Editing researchers
  • Anyone designing therapeutics or knockouts
  • University labs
  • Biotech engineers needing quick sequence checks
  • Hobbyists learning genome engineering

Because it runs in the browser, there’s no install, no login, and no command-line wrangling.

And because everything is computed deterministically, users can paste sequences with confidence — the planner never silently adjusts anything.

What’s next

  • Off-target heuristic scanning
  • Genome-context lookup (hg38 / Ensembl)
  • Export lab notebook formats
  • Smarter prime editing scoring

Helix is growing fast, and this planner is just the beginning of a bigger ecosystem.

Happy editing and if you build anything with it, tell me. This project is becoming a surprisingly fun intersection of web engineering and genome design.

Top comments (0)