CloningStrategyViewer

Sequence-level visualization of cloning strategies showing inputs, actions, and resulting constructs.

Demos

Restriction / Ligation

EcoRI + BamHI directional cloning

Gibson Assembly

30bp homology overlaps, 50°C isothermal

Golden Gate (BsaI)

Type IIS: 4nt overhang codes AATG->TTCG->GCAA->AATG

Cre-loxP Excision

Same-orientation loxP sites, floxed region excised

Cre-loxP Inversion

Inverted loxP sites (lox66/lox71), FLEX cassette activation

Cre-loxP Insertion (RMCE)

Heterospecific lox sites, cassette exchange at landing pad

Cre-loxP Translocation

loxP sites on different chromosomes, reciprocal translocation

Gateway LR

attL x attR recombination (LR Clonase II)

CRISPR-Cas9 HDR

sgRNA-guided DSB + homology-directed repair

Usage

<script>
  import { CloningStrategyViewer } from '@molbiohive/hatchlings';
</script>

<CloningStrategyViewer node={cloningResult} width={800} height={160} />

Supported Paradigms

• Restriction / Ligation — EcoRI, BamHI, etc.
• Gibson Assembly — overlapping homology arms
• Golden Gate — type IIS assembly (BsaI, BbsI)
• Gateway — attL/attR recombination
• Cre-lox — excision, inversion, insertion, translocation
• CRISPR-Cas9 — HDR with donor template
• PCR — amplification with primers

Props

Prop	Type	Default	Description
node	CloningNode	—	Result construct with source
width	number	—	SVG width
height	number	160	SVG height
marginBp	number	—	bp to show at construct ends