ChemGenius Blog Components Playground
This page replaces the old MDX playground with reusable TypeScript components for images, chemistry visuals, and interactive checks.
Images
Use BlogImage to keep screenshots and captions consistent.
Chemical visuals
SMILES
SMILES
CCO
Chemfig
chemfig
CH_3-CH_2-OH
RDKit
RDKit.js
CC(O)C
Reaction
Reaction SMILES
CCO>>CC=O
Molecular structure view
SMILES
C1=CC=CC=C1
No arrow overlay provided.
Reaction sketch
[O:1]=[C:2]O.[BrH]
→[O:1]=[C:2][Br]
Preview
Quick visual placeholder for the reaction sketch. The full editor lives in the Reaction Solver.
Quick quiz
Quick quiz
Understanding check
Understanding check
Draw the product
Use the Ketcher canvas to draw the product of 1-bromopropane with NaOEt.
Focus on the SN2 substitution product and keep the stereochemistry consistent.
tip
Primary substrates favor SN2 with strong nucleophiles.
Reaction canvas
Loading editor…
note
These components are meant to be dropped into any blog page without MDX. They keep styling consistent while still letting you mix narrative and interactive content.