diff --git a/src/islands/dev/CssGenerator.tsx b/src/islands/dev/CssGenerator.tsx
new file mode 100644
index 0000000..69e5d1c
--- /dev/null
+++ b/src/islands/dev/CssGenerator.tsx
@@ -0,0 +1,132 @@
+import { useState } from 'react';
+import { CopyButton } from '@/components/ui/CopyButton';
+import { linearGradientCss, radialGradientCss, boxShadowCss, borderRadiusCss } from '@/tools/dev/css-generators.lib';
+import type { Lang } from '@/i18n/config';
+
+type Tab = 'gradient' | 'shadow' | 'radius';
+
+const TR: Record<Lang, Record<string, string>> = {
+  en: {
+    intro: 'Generate CSS for gradients, box-shadows and border-radius with a live preview — copy the code straight into your stylesheet. Runs in your browser.',
+    gradient: 'Gradient', shadow: 'Box shadow', radius: 'Border radius',
+    type: 'Type', linear: 'Linear', radial: 'Radial', angle: 'Angle', color1: 'Color 1', color2: 'Color 2',
+    x: 'Offset X', y: 'Offset Y', blur: 'Blur', spread: 'Spread', color: 'Color', inset: 'Inset',
+    tl: 'Top-left', tr: 'Top-right', br: 'Bottom-right', bl: 'Bottom-left', copy: 'Copy CSS',
+  },
+  id: {
+    intro: 'Buat CSS untuk gradien, box-shadow, dan border-radius dengan pratinjau langsung — salin kodenya langsung ke stylesheet Anda. Berjalan di browser Anda.',
+    gradient: 'Gradien', shadow: 'Box shadow', radius: 'Border radius',
+    type: 'Tipe', linear: 'Linear', radial: 'Radial', angle: 'Sudut', color1: 'Warna 1', color2: 'Warna 2',
+    x: 'Offset X', y: 'Offset Y', blur: 'Blur', spread: 'Spread', color: 'Warna', inset: 'Inset',
+    tl: 'Kiri-atas', tr: 'Kanan-atas', br: 'Kanan-bawah', bl: 'Kiri-bawah', copy: 'Salin CSS',
+  },
+};
+
+function Slider({ label, value, set, min, max }: { label: string; value: number; set: (n: number) => void; min: number; max: number }) {
+  return (
+    <label className="space-y-1 text-sm">
+      <span className="flex justify-between"><span className="font-semibold">{label}</span><span className="font-mono text-muted-foreground">{value}</span></span>
+      <input type="range" min={min} max={max} value={value} onChange={e => set(Number(e.target.value))} className="w-full accent-accent" />
+    </label>
+  );
+}
+
+export default function CssGenerator({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
+  const [tab, setTab] = useState<Tab>('gradient');
+
+  const [gType, setGType] = useState<'linear' | 'radial'>('linear');
+  const [angle, setAngle] = useState(90);
+  const [c1, setC1] = useState('#7c3aed');
+  const [c2, setC2] = useState('#22d3ee');
+
+  const [sx, setSx] = useState(4); const [sy, setSy] = useState(6); const [sblur, setSblur] = useState(16);
+  const [sspread, setSspread] = useState(0); const [scolor, setScolor] = useState('#00000040'); const [sinset, setSinset] = useState(false);
+
+  const [tl, setTl] = useState(16); const [tr, setTr] = useState(16); const [br, setBr] = useState(16); const [bl, setBl] = useState(16);
+
+  const gradient = gType === 'linear'
+    ? linearGradientCss(angle, [{ color: c1, pos: 0 }, { color: c2, pos: 100 }])
+    : radialGradientCss('circle', [{ color: c1, pos: 0 }, { color: c2, pos: 100 }]);
+  const shadow = boxShadowCss({ x: sx, y: sy, blur: sblur, spread: sspread, color: scolor, inset: sinset });
+  const radius = borderRadiusCss(tl, tr, br, bl);
+
+  const css = tab === 'gradient' ? `background: ${gradient};`
+    : tab === 'shadow' ? `box-shadow: ${shadow};`
+    : `border-radius: ${radius};`;
+
+  const previewStyle: React.CSSProperties = tab === 'gradient' ? { background: gradient }
+    : tab === 'shadow' ? { boxShadow: shadow, background: 'var(--tw-prose-body, #fff)' }
+    : { borderRadius: radius, background: gradient };
+
+  const input = 'w-full border-2 border-border bg-muted p-1.5 text-sm';
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">{t.intro}</p>
+
+      <div className="flex gap-1">
+        {(['gradient', 'shadow', 'radius'] as const).map(x => (
+          <button key={x} onClick={() => setTab(x)} aria-pressed={tab === x}
+            className={`border-2 px-4 py-2 text-sm font-bold uppercase tracking-wide ${tab === x ? 'border-border bg-accent text-accent-foreground shadow-brutal' : 'border-border'}`}>
+            {t[x]}
+          </button>
+        ))}
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-[1fr_240px]">
+        <div className="space-y-3">
+          {tab === 'gradient' && (
+            <>
+              <div className="flex gap-1 text-sm">
+                {(['linear', 'radial'] as const).map(g => (
+                  <button key={g} onClick={() => setGType(g)} aria-pressed={gType === g}
+                    className={`border-2 px-3 py-1 font-medium ${gType === g ? 'border-border bg-accent text-accent-foreground' : 'border-border'}`}>{t[g]}</button>
+                ))}
+              </div>
+              {gType === 'linear' && <Slider label={t.angle} value={angle} set={setAngle} min={0} max={360} />}
+              <div className="grid grid-cols-2 gap-3">
+                <label className="space-y-1 text-sm"><span className="font-semibold">{t.color1}</span><input type="color" value={c1} onChange={e => setC1(e.target.value)} className="h-9 w-full border-2 border-border" /></label>
+                <label className="space-y-1 text-sm"><span className="font-semibold">{t.color2}</span><input type="color" value={c2} onChange={e => setC2(e.target.value)} className="h-9 w-full border-2 border-border" /></label>
+              </div>
+            </>
+          )}
+          {tab === 'shadow' && (
+            <>
+              <div className="grid grid-cols-2 gap-3">
+                <Slider label={t.x} value={sx} set={setSx} min={-50} max={50} />
+                <Slider label={t.y} value={sy} set={setSy} min={-50} max={50} />
+                <Slider label={t.blur} value={sblur} set={setSblur} min={0} max={100} />
+                <Slider label={t.spread} value={sspread} set={setSspread} min={-50} max={50} />
+              </div>
+              <div className="flex items-center gap-4">
+                <label className="flex items-center gap-2 text-sm"><span className="font-semibold">{t.color}</span><input value={scolor} onChange={e => setScolor(e.target.value)} className={input} /></label>
+                <label className="flex items-center gap-2 text-sm"><input type="checkbox" checked={sinset} onChange={e => setSinset(e.target.checked)} className="h-4 w-4 accent-accent" /><span className="font-semibold">{t.inset}</span></label>
+              </div>
+            </>
+          )}
+          {tab === 'radius' && (
+            <div className="grid grid-cols-2 gap-3">
+              <Slider label={t.tl} value={tl} set={setTl} min={0} max={100} />
+              <Slider label={t.tr} value={tr} set={setTr} min={0} max={100} />
+              <Slider label={t.bl} value={bl} set={setBl} min={0} max={100} />
+              <Slider label={t.br} value={br} set={setBr} min={0} max={100} />
+            </div>
+          )}
+        </div>
+
+        <div className="flex items-center justify-center border-2 border-border bg-[repeating-conic-gradient(#e5e5e5_0_25%,#fff_0_50%)] bg-[length:20px_20px] p-6">
+          <div className="h-28 w-28" style={previewStyle} />
+        </div>
+      </div>
+
+      <div className="space-y-1">
+        <div className="flex items-center justify-between">
+          <span className="text-xs font-bold uppercase tracking-wide text-muted-foreground">CSS</span>
+          <CopyButton value={css} label={t.copy} />
+        </div>
+        <textarea readOnly value={css} rows={2} className="w-full border-2 border-border bg-muted p-2 font-mono text-sm" />
+      </div>
+    </div>
+  );
+}
diff --git a/src/islands/dev/FancyText.tsx b/src/islands/dev/FancyText.tsx
new file mode 100644
index 0000000..a01136b
--- /dev/null
+++ b/src/islands/dev/FancyText.tsx
@@ -0,0 +1,41 @@
+import { useState } from 'react';
+import { TextArea } from '@/components/ui/TextArea';
+import { CopyButton } from '@/components/ui/CopyButton';
+import { allStyles } from '@/tools/dev/fancytext.lib';
+import type { Lang } from '@/i18n/config';
+
+const TR: Record<Lang, Record<string, string>> = {
+  en: {
+    intro: 'Turn plain text into fancy Unicode styles for bios, usernames and posts. These are real Unicode characters, so they paste anywhere — Instagram, TikTok, Discord and more.',
+    placeholder: 'Type your text…', copy: 'Copy',
+  },
+  id: {
+    intro: 'Ubah teks biasa menjadi gaya Unicode keren untuk bio, username, dan postingan. Ini karakter Unicode asli, jadi bisa ditempel di mana saja — Instagram, TikTok, Discord, dan lainnya.',
+    placeholder: 'Ketik teks Anda…', copy: 'Salin',
+  },
+};
+
+export default function FancyText({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
+  const [text, setText] = useState('Hello world');
+  const styles = allStyles(text || '');
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">{t.intro}</p>
+      <TextArea value={text} onChange={e => setText(e.target.value)} rows={2} placeholder={t.placeholder} />
+
+      <ul className="divide-y-2 divide-border border-2 border-border">
+        {styles.map(s => (
+          <li key={s.id} className="flex items-center justify-between gap-3 px-3 py-2">
+            <div className="min-w-0 flex-1">
+              <div className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">{s.label}</div>
+              <div className="truncate text-lg" title={s.output}>{s.output || ' '}</div>
+            </div>
+            <CopyButton value={s.output} label={t.copy} disabled={!s.output} />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/src/islands/dev/HtmlMarkdown.tsx b/src/islands/dev/HtmlMarkdown.tsx
new file mode 100644
index 0000000..108f14e
--- /dev/null
+++ b/src/islands/dev/HtmlMarkdown.tsx
@@ -0,0 +1,78 @@
+import { useState } from 'react';
+import { ArrowLeftRight } from 'lucide-react';
+import { Button } from '@/components/ui/Button';
+import { TextArea } from '@/components/ui/TextArea';
+import { CopyButton } from '@/components/ui/CopyButton';
+import { htmlToMarkdown, markdownToHtml } from '@/tools/dev/htmlmd.lib';
+import type { Lang } from '@/i18n/config';
+
+type Dir = 'h2m' | 'm2h';
+
+const TR: Record<Lang, Record<string, string>> = {
+  en: {
+    intro: 'Convert HTML to Markdown or Markdown to HTML, entirely in your browser. Nothing is uploaded.',
+    h2m: 'HTML → Markdown', m2h: 'Markdown → HTML', swap: 'Swap',
+    input: 'Input', output: 'Output', convert: 'Convert', copy: 'Copy', failed: 'Could not convert.',
+  },
+  id: {
+    intro: 'Konversi HTML ke Markdown atau Markdown ke HTML, sepenuhnya di browser Anda. Tidak ada yang diunggah.',
+    h2m: 'HTML → Markdown', m2h: 'Markdown → HTML', swap: 'Tukar',
+    input: 'Masukan', output: 'Keluaran', convert: 'Konversi', copy: 'Salin', failed: 'Tidak dapat mengonversi.',
+  },
+};
+
+export default function HtmlMarkdown({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
+  const [dir, setDir] = useState<Dir>('h2m');
+  const [src, setSrc] = useState('<h1>Hello</h1>\n<p>A <strong>quick</strong> demo.</p>');
+  const [out, setOut] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+
+  const convert = async () => {
+    setBusy(true); setError('');
+    try {
+      setOut(dir === 'h2m' ? await htmlToMarkdown(src) : await markdownToHtml(src));
+    } catch {
+      setError(t.failed);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const swap = () => {
+    setDir(d => (d === 'h2m' ? 'm2h' : 'h2m'));
+    setSrc(out || src);
+    setOut('');
+  };
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">{t.intro}</p>
+
+      <div className="flex flex-wrap items-center gap-2">
+        <span className="border-2 border-border bg-accent px-3 py-1.5 text-sm font-bold uppercase tracking-wide text-accent-foreground shadow-brutal-sm">
+          {dir === 'h2m' ? t.h2m : t.m2h}
+        </span>
+        <Button variant="ghost" onClick={swap}><ArrowLeftRight className="h-4 w-4" />{t.swap}</Button>
+      </div>
+
+      <div className="grid gap-3 lg:grid-cols-2">
+        <div className="space-y-1">
+          <span className="text-xs font-bold uppercase tracking-wide text-muted-foreground">{t.input}</span>
+          <TextArea value={src} onChange={e => setSrc(e.target.value)} rows={12} className="font-mono text-sm" />
+        </div>
+        <div className="space-y-1">
+          <div className="flex items-center justify-between">
+            <span className="text-xs font-bold uppercase tracking-wide text-muted-foreground">{t.output}</span>
+            <CopyButton value={out} label={t.copy} disabled={!out} />
+          </div>
+          <textarea readOnly value={out} rows={12} className="w-full border-2 border-border bg-muted p-2 font-mono text-sm" />
+        </div>
+      </div>
+
+      {error && <p className="text-sm text-red-600">{error}</p>}
+      <Button onClick={convert} disabled={busy || !src.trim()}>{busy ? '…' : t.convert}</Button>
+    </div>
+  );
+}
diff --git a/src/islands/dev/ImageBase64.tsx b/src/islands/dev/ImageBase64.tsx
new file mode 100644
index 0000000..15eda26
--- /dev/null
+++ b/src/islands/dev/ImageBase64.tsx
@@ -0,0 +1,78 @@
+import { useState } from 'react';
+import { Dropzone } from '@/components/ui/Dropzone';
+import { CopyButton } from '@/components/ui/CopyButton';
+import { formatBytes } from '@/tools/image/canvas.lib';
+import { decodedSize, toCssBackground, toImgTag } from '@/tools/dev/datauri.lib';
+import type { Lang } from '@/i18n/config';
+
+const TR: Record<Lang, Record<string, string>> = {
+  en: {
+    intro: 'Convert an image to a Base64 data URI you can paste straight into CSS, HTML or JSON — no upload, it is encoded in your browser.',
+    drop: 'Drop an image or click to browse', dropSub: 'PNG, JPG, GIF, SVG, WebP…',
+    dataUri: 'Data URI', cssBg: 'CSS background', imgTag: 'HTML img tag', encoded: 'Encoded size', copy: 'Copy', clear: 'Clear',
+  },
+  id: {
+    intro: 'Ubah gambar menjadi data URI Base64 yang bisa langsung ditempel ke CSS, HTML, atau JSON — tanpa unggah, dienkode di browser Anda.',
+    drop: 'Letakkan gambar atau klik untuk memilih', dropSub: 'PNG, JPG, GIF, SVG, WebP…',
+    dataUri: 'Data URI', cssBg: 'CSS background', imgTag: 'HTML img tag', encoded: 'Ukuran terenkode', copy: 'Salin', clear: 'Bersihkan',
+  },
+};
+
+export default function ImageBase64({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
+  const [name, setName] = useState('');
+  const [origSize, setOrigSize] = useState(0);
+  const [dataUri, setDataUri] = useState('');
+  const [error, setError] = useState('');
+
+  const onDrop = (files: File[]) => {
+    const img = files.find(f => f.type.startsWith('image/'));
+    if (!img) return;
+    setName(img.name); setOrigSize(img.size); setError('');
+    const reader = new FileReader();
+    reader.onload = () => setDataUri(String(reader.result || ''));
+    reader.onerror = () => setError('Could not read this image.');
+    reader.readAsDataURL(img);
+  };
+
+  const base64 = dataUri.includes(',') ? dataUri.slice(dataUri.indexOf(',') + 1) : '';
+  const encoded = base64 ? decodedSize(base64) : 0;
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">{t.intro}</p>
+
+      <Dropzone onDrop={onDrop} accept="image/*" multiple={false}>
+        <div className="space-y-1">
+          <p className="text-lg font-bold">{t.drop}</p>
+          <p className="text-sm text-muted-foreground">{t.dropSub}</p>
+        </div>
+      </Dropzone>
+
+      {error && <p className="text-sm text-red-600">{error}</p>}
+
+      {dataUri && (
+        <div className="space-y-4">
+          <div className="flex flex-wrap items-center gap-3 text-sm text-muted-foreground">
+            <img src={dataUri} alt={name} className="h-16 w-16 border-2 border-border object-contain" />
+            <span><span className="font-bold text-foreground">{name}</span> — {formatBytes(origSize)} → {formatBytes(encoded)} {t.encoded.toLowerCase()}</span>
+          </div>
+
+          {([
+            [t.dataUri, dataUri],
+            [t.cssBg, toCssBackground(dataUri)],
+            [t.imgTag, toImgTag(dataUri, name)],
+          ] as const).map(([label, val]) => (
+            <div key={label} className="space-y-1">
+              <div className="flex items-center justify-between">
+                <span className="text-xs font-bold uppercase tracking-wide text-muted-foreground">{label}</span>
+                <CopyButton value={val} label={t.copy} />
+              </div>
+              <textarea readOnly value={val} rows={3} className="w-full break-all border-2 border-border bg-muted p-2 font-mono text-xs" />
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/registry/tool-i18n.ts b/src/registry/tool-i18n.ts
index 584de4a..07cbb44 100644
--- a/src/registry/tool-i18n.ts
+++ b/src/registry/tool-i18n.ts
@@ -63,6 +63,10 @@ const ID_LABELS: Record<string, { name: string; summary: string }> = {
   "http-status": { name: "Kode Status HTTP", summary: "Cari kode status HTTP apa pun — angka, kelas, atau nama" },
   "mime-lookup": { name: "Pencarian Tipe MIME", summary: "Temukan tipe MIME untuk ekstensi berkas (dan sebaliknya)" },
   "lorem-ipsum": { name: "Generator Lorem Ipsum", summary: "Buat teks placeholder Lorem Ipsum per paragraf, kalimat, atau kata" },
+  "fancy-text": { name: "Generator Teks Keren", summary: "Ubah teks menjadi gaya Unicode keren untuk bio dan postingan" },
+  "image-to-base64": { name: "Gambar ke Base64", summary: "Ubah gambar menjadi data URI Base64 untuk CSS/HTML" },
+  "css-generator": { name: "Generator CSS", summary: "Buat CSS gradien, box-shadow & border-radius dengan pratinjau" },
+  "html-markdown": { name: "HTML ↔ Markdown", summary: "Konversi antara HTML dan Markdown, dua arah" },
   "browser-info": { name: "Apa Browser Saya", summary: "Lihat user agent, browser, ukuran layar & viewport Anda dan lainnya" },
   "emoji-picker": { name: "Pemilih Emoji & Simbol", summary: "Cari dan salin emoji & karakter khusus (—, °, ±, €, ⌘)" },
   "roman-numerals": { name: "Konverter Angka Romawi", summary: "Konversi angka ke angka Romawi dan sebaliknya (1–3999)" },
diff --git a/src/registry/tool-seo.ts b/src/registry/tool-seo.ts
index f20c96e..e3b6b6a 100644
--- a/src/registry/tool-seo.ts
+++ b/src/registry/tool-seo.ts
@@ -604,6 +604,74 @@ const en: Record<string, ToolSeoContent> = {
       { q: 'Does it work offline?', a: 'Yes. As a PWA it keeps working with no connection once loaded.' },
     ],
   },
+  'fancy-text': {
+    title: 'Fancy Text Generator — Cool Unicode Fonts for Bios',
+    description: 'Turn plain text into fancy Unicode styles — bold, italic, script, strikethrough and more — that paste into Instagram, TikTok and Discord. Free, in your browser.',
+    intro: 'This fancy text generator converts your text into stylish Unicode variants — bold, italic, cursive script, double-struck, circled, strikethrough and more. They are real Unicode characters, not images or fonts, so they copy and paste into bios, usernames, captions and messages anywhere.',
+    howTo: [
+      'Type or paste your text in the box.',
+      'Browse the styled versions generated below.',
+      'Click Copy next to the style you like.',
+      'Paste it into your Instagram/TikTok bio, a Discord message, or anywhere else.',
+    ],
+    faqs: [
+      { q: 'Will these fonts work everywhere?', a: 'They are standard Unicode characters, so they display on most modern apps and sites (Instagram, TikTok, Twitter/X, Discord). A few places with restricted character sets may show boxes.' },
+      { q: 'Is my text sent anywhere?', a: 'No. The conversion happens entirely in your browser — nothing you type is uploaded.' },
+      { q: 'Why do some letters look different or missing?', a: 'Unicode does not include a styled version of every character, so unmapped letters or symbols are left as-is. Certain math letters live in special code points, which the tool handles.' },
+      { q: 'Are these real fonts?', a: 'No — they are separate Unicode characters that look like styled letters, which is why they keep their look when pasted (unlike a font that only exists on your device).' },
+    ],
+  },
+  'image-to-base64': {
+    title: 'Image to Base64 — Data URI Encoder (CSS / HTML)',
+    description: 'Convert an image (PNG, JPG, SVG, GIF, WebP) to a Base64 data URI you can paste into CSS, HTML or JSON. Encoded in your browser — nothing is uploaded.',
+    intro: 'This tool encodes an image to a Base64 data URI so you can embed it inline in CSS (background-image), HTML (an img tag) or JSON without a separate file request. The image is read and encoded in your browser, so it is never uploaded.',
+    howTo: [
+      'Drop an image onto the box or click to browse.',
+      'The tool encodes it and shows the data URI plus ready-made CSS and HTML snippets.',
+      'Click Copy on the format you need.',
+      'Paste it into your stylesheet, HTML or data file.',
+    ],
+    faqs: [
+      { q: 'Is my image uploaded?', a: 'No. The image is read and Base64-encoded entirely in your browser — it never leaves your device.' },
+      { q: 'When should I inline an image as Base64?', a: 'Inlining suits small images (icons, tiny backgrounds) to save an HTTP request. Base64 is about 33% larger than the file, so it is not ideal for large images.' },
+      { q: 'Which formats work?', a: 'Any image the browser can read — PNG, JPG, GIF, SVG and WebP — is supported.' },
+      { q: 'Can I use it in CSS and HTML?', a: 'Yes. The tool gives you the raw data URI, a CSS background-image declaration, and an HTML img tag, each with a copy button.' },
+    ],
+  },
+  'css-generator': {
+    title: 'CSS Generator — Gradient, Box-Shadow & Border-Radius',
+    description: 'Generate CSS for gradients, box-shadows and border-radius with a live preview, then copy the code. Free, runs entirely in your browser.',
+    intro: 'This CSS generator builds the code for gradients (linear and radial), box-shadows and border-radius, with a live preview as you adjust the controls. Tweak colors, angles, offsets and corners, then copy the CSS straight into your stylesheet.',
+    howTo: [
+      'Pick a tab: Gradient, Box shadow, or Border radius.',
+      'Adjust the sliders and colors and watch the live preview update.',
+      'Read the generated CSS below the preview.',
+      'Click Copy CSS and paste it into your stylesheet.',
+    ],
+    faqs: [
+      { q: 'Does it run in my browser?', a: 'Yes. The CSS is generated locally as you type — nothing is sent to a server.' },
+      { q: 'What can it generate?', a: 'Linear and radial gradients, box-shadows (with inset and spread), and border-radius (per-corner). The preview shows exactly how the CSS renders.' },
+      { q: 'Can I use RGBA / hex colors?', a: 'Yes. The shadow color accepts any CSS color, including hex with alpha (e.g. #00000040) and rgba().' },
+      { q: 'Is the output standard CSS?', a: 'Yes — it produces plain CSS properties you can drop into any stylesheet or inline style.' },
+    ],
+  },
+  'html-markdown': {
+    title: 'HTML to Markdown & Markdown to HTML Converter',
+    description: 'Convert HTML to Markdown or Markdown to HTML both ways, in your browser. Great for docs, READMEs and CMS content. Nothing is uploaded.',
+    intro: 'This converter turns HTML into clean Markdown and Markdown into sanitized HTML, in either direction. It is handy for moving content between a CMS, a README, or documentation. Everything runs in your browser, so your content stays private.',
+    howTo: [
+      'Choose a direction — HTML → Markdown or Markdown → HTML (use Swap to flip).',
+      'Paste your HTML or Markdown into the input box.',
+      'Click Convert to generate the result on the right.',
+      'Copy the output for your README, CMS or docs.',
+    ],
+    faqs: [
+      { q: 'Is my content uploaded?', a: 'No. The conversion runs entirely in your browser — your HTML/Markdown never leaves your device.' },
+      { q: 'Is the HTML output safe?', a: 'Markdown is rendered to HTML and then sanitized (scripts and dangerous attributes removed) so the output is safe to use.' },
+      { q: 'Which Markdown flavor is used?', a: 'Standard Markdown with common extensions — headings, lists, links, emphasis, code blocks and tables convert cleanly both ways.' },
+      { q: 'Can I go both directions?', a: 'Yes. Use the Swap button to switch between HTML → Markdown and Markdown → HTML; it carries the last result across as the new input.' },
+    ],
+  },
   'lorem-ipsum': {
     title: 'Free Lorem Ipsum Generator — Placeholder Text by Paragraph',
     description: 'Generate Lorem Ipsum placeholder text by paragraphs, sentences or words for mockups and layouts. Copy with one click. Free and in your browser.',
@@ -3737,6 +3805,74 @@ const id: Record<string, ToolSeoContent> = {
       { q: 'Apakah bekerja offline?', a: 'Ya. Sebagai PWA tetap berjalan tanpa koneksi setelah dimuat.' },
     ],
   },
+  'fancy-text': {
+    title: 'Generator Teks Keren — Font Unicode untuk Bio',
+    description: 'Ubah teks biasa menjadi gaya Unicode keren — tebal, miring, script, coret, dan lainnya — yang bisa ditempel ke Instagram, TikTok, dan Discord. Gratis, di browser Anda.',
+    intro: 'Generator teks keren ini mengubah teks Anda menjadi varian Unicode bergaya — tebal, miring, kursif script, double-struck, dilingkari, dicoret, dan lainnya. Ini karakter Unicode asli, bukan gambar atau font, jadi bisa disalin dan ditempel ke bio, username, caption, dan pesan di mana saja.',
+    howTo: [
+      'Ketik atau tempel teks Anda di kotak.',
+      'Telusuri versi bergaya yang dihasilkan di bawah.',
+      'Klik Salin di samping gaya yang Anda suka.',
+      'Tempel ke bio Instagram/TikTok, pesan Discord, atau di mana pun.',
+    ],
+    faqs: [
+      { q: 'Apakah font ini berfungsi di mana saja?', a: 'Ini karakter Unicode standar, jadi tampil di sebagian besar aplikasi dan situs modern (Instagram, TikTok, Twitter/X, Discord). Beberapa tempat dengan set karakter terbatas mungkin menampilkan kotak.' },
+      { q: 'Apakah teks saya dikirim ke mana pun?', a: 'Tidak. Konversi terjadi sepenuhnya di browser Anda — tidak ada yang Anda ketik diunggah.' },
+      { q: 'Mengapa beberapa huruf terlihat beda atau hilang?', a: 'Unicode tidak menyertakan versi bergaya untuk setiap karakter, jadi huruf atau simbol yang tak terpetakan dibiarkan apa adanya. Beberapa huruf matematika berada di code point khusus yang ditangani tool.' },
+      { q: 'Apakah ini font asli?', a: 'Bukan — ini karakter Unicode terpisah yang tampak seperti huruf bergaya, itulah sebabnya tampilannya tetap saat ditempel (tidak seperti font yang hanya ada di perangkat Anda).' },
+    ],
+  },
+  'image-to-base64': {
+    title: 'Gambar ke Base64 — Encoder Data URI (CSS / HTML)',
+    description: 'Ubah gambar (PNG, JPG, SVG, GIF, WebP) menjadi data URI Base64 yang bisa ditempel ke CSS, HTML, atau JSON. Dienkode di browser Anda — tidak ada yang diunggah.',
+    intro: 'Tool ini mengenkode gambar menjadi data URI Base64 sehingga Anda bisa menyematkannya secara inline di CSS (background-image), HTML (tag img), atau JSON tanpa permintaan file terpisah. Gambar dibaca dan dienkode di browser Anda, jadi tidak pernah diunggah.',
+    howTo: [
+      'Jatuhkan gambar ke kotak atau klik untuk memilih.',
+      'Tool mengenkodenya dan menampilkan data URI plus cuplikan CSS dan HTML siap pakai.',
+      'Klik Salin pada format yang Anda perlukan.',
+      'Tempel ke stylesheet, HTML, atau file data Anda.',
+    ],
+    faqs: [
+      { q: 'Apakah gambar saya diunggah?', a: 'Tidak. Gambar dibaca dan dienkode Base64 sepenuhnya di browser Anda — tidak pernah keluar dari perangkat.' },
+      { q: 'Kapan sebaiknya inline gambar sebagai Base64?', a: 'Inline cocok untuk gambar kecil (ikon, latar mungil) untuk menghemat satu permintaan HTTP. Base64 sekitar 33% lebih besar dari file, jadi kurang ideal untuk gambar besar.' },
+      { q: 'Format apa yang berfungsi?', a: 'Gambar apa pun yang bisa dibaca browser — PNG, JPG, GIF, SVG, dan WebP — didukung.' },
+      { q: 'Bisa dipakai di CSS dan HTML?', a: 'Ya. Tool memberi Anda data URI mentah, deklarasi CSS background-image, dan tag img HTML, masing-masing dengan tombol salin.' },
+    ],
+  },
+  'css-generator': {
+    title: 'Generator CSS — Gradien, Box-Shadow & Border-Radius',
+    description: 'Buat CSS untuk gradien, box-shadow, dan border-radius dengan pratinjau langsung, lalu salin kodenya. Gratis, berjalan sepenuhnya di browser Anda.',
+    intro: 'Generator CSS ini membuat kode untuk gradien (linear dan radial), box-shadow, dan border-radius, dengan pratinjau langsung saat Anda mengatur kontrol. Ubah warna, sudut, offset, dan sudut, lalu salin CSS langsung ke stylesheet Anda.',
+    howTo: [
+      'Pilih tab: Gradien, Box shadow, atau Border radius.',
+      'Atur slider dan warna dan lihat pratinjau langsung diperbarui.',
+      'Baca CSS yang dihasilkan di bawah pratinjau.',
+      'Klik Salin CSS dan tempel ke stylesheet Anda.',
+    ],
+    faqs: [
+      { q: 'Apakah berjalan di browser saya?', a: 'Ya. CSS dihasilkan secara lokal saat Anda mengetik — tidak ada yang dikirim ke server.' },
+      { q: 'Apa yang bisa dibuat?', a: 'Gradien linear dan radial, box-shadow (dengan inset dan spread), dan border-radius (per sudut). Pratinjau menampilkan persis bagaimana CSS dirender.' },
+      { q: 'Bisakah pakai warna RGBA / hex?', a: 'Ya. Warna shadow menerima warna CSS apa pun, termasuk hex dengan alfa (mis. #00000040) dan rgba().' },
+      { q: 'Apakah keluarannya CSS standar?', a: 'Ya — menghasilkan properti CSS biasa yang bisa Anda tempel ke stylesheet atau inline style mana pun.' },
+    ],
+  },
+  'html-markdown': {
+    title: 'Konverter HTML ke Markdown & Markdown ke HTML',
+    description: 'Konversi HTML ke Markdown atau Markdown ke HTML dua arah, di browser Anda. Cocok untuk dokumen, README, dan konten CMS. Tidak ada yang diunggah.',
+    intro: 'Konverter ini mengubah HTML menjadi Markdown yang bersih dan Markdown menjadi HTML yang sudah disanitasi, dua arah. Berguna untuk memindahkan konten antara CMS, README, atau dokumentasi. Semua berjalan di browser Anda, jadi konten Anda tetap privat.',
+    howTo: [
+      'Pilih arah — HTML → Markdown atau Markdown → HTML (pakai Tukar untuk membalik).',
+      'Tempel HTML atau Markdown Anda ke kotak masukan.',
+      'Klik Konversi untuk menghasilkan hasil di sebelah kanan.',
+      'Salin keluaran untuk README, CMS, atau dokumen Anda.',
+    ],
+    faqs: [
+      { q: 'Apakah konten saya diunggah?', a: 'Tidak. Konversi berjalan sepenuhnya di browser Anda — HTML/Markdown Anda tidak pernah keluar dari perangkat.' },
+      { q: 'Apakah keluaran HTML aman?', a: 'Markdown dirender ke HTML lalu disanitasi (script dan atribut berbahaya dihapus) sehingga keluarannya aman digunakan.' },
+      { q: 'Flavor Markdown apa yang dipakai?', a: 'Markdown standar dengan ekstensi umum — heading, list, tautan, penekanan, blok kode, dan tabel dikonversi bersih dua arah.' },
+      { q: 'Bisakah dua arah?', a: 'Ya. Pakai tombol Tukar untuk beralih antara HTML → Markdown dan Markdown → HTML; hasil terakhir dibawa menjadi masukan baru.' },
+    ],
+  },
   'lorem-ipsum': {
     title: 'Generator Lorem Ipsum Gratis — Teks Placeholder per Paragraf',
     description: 'Buat teks placeholder Lorem Ipsum per paragraf, kalimat, atau kata untuk mockup dan tata letak. Salin sekali klik. Gratis dan di browser Anda.',
diff --git a/src/registry/tools.ts b/src/registry/tools.ts
index ea12c2a..c96d787 100644
--- a/src/registry/tools.ts
+++ b/src/registry/tools.ts
@@ -619,6 +619,50 @@ export const tools: ToolDef[] = [
     load: () => import('@/islands/dev/LoremIpsum'),
     status: 'beta'
   },
+  {
+    id: 'fancy-text',
+    name: 'Fancy Text Generator',
+    category: 'Dev',
+    route: '/tools/fancy-text',
+    keywords: ['fancy text', 'unicode text', 'bold text generator', 'italic text', 'font generator', 'cool text', 'instagram fonts', 'stylish text'],
+    icon: Sparkles,
+    summary: 'Turn text into fancy Unicode styles for bios and posts',
+    load: () => import('@/islands/dev/FancyText'),
+    status: 'beta'
+  },
+  {
+    id: 'image-to-base64',
+    name: 'Image to Base64',
+    category: 'Dev',
+    route: '/tools/image-to-base64',
+    keywords: ['image to base64', 'base64 image', 'data uri', 'data url', 'encode image', 'inline image css', 'png to base64', 'svg to base64'],
+    icon: FileImage,
+    summary: 'Convert an image to a Base64 data URI for CSS/HTML',
+    load: () => import('@/islands/dev/ImageBase64'),
+    status: 'beta'
+  },
+  {
+    id: 'css-generator',
+    name: 'CSS Generator',
+    category: 'Dev',
+    route: '/tools/css-generator',
+    keywords: ['css generator', 'gradient generator', 'box shadow generator', 'border radius', 'css gradient', 'linear gradient', 'radial gradient'],
+    icon: Brush,
+    summary: 'Generate gradient, box-shadow & border-radius CSS with a preview',
+    load: () => import('@/islands/dev/CssGenerator'),
+    status: 'beta'
+  },
+  {
+    id: 'html-markdown',
+    name: 'HTML ↔ Markdown',
+    category: 'Dev',
+    route: '/tools/html-markdown',
+    keywords: ['html to markdown', 'markdown to html', 'convert markdown', 'md to html', 'html to md', 'turndown', 'markdown converter'],
+    icon: FileCode2,
+    summary: 'Convert between HTML and Markdown, both ways',
+    load: () => import('@/islands/dev/HtmlMarkdown'),
+    status: 'beta'
+  },
   {
     id: 'browser-info',
     name: 'What Is My Browser',
diff --git a/src/tools/dev/css-generators.lib.test.ts b/src/tools/dev/css-generators.lib.test.ts
new file mode 100644
index 0000000..1999125
--- /dev/null
+++ b/src/tools/dev/css-generators.lib.test.ts
@@ -0,0 +1,32 @@
+import { describe, it, expect } from 'vitest';
+import { linearGradientCss, radialGradientCss, boxShadowCss, borderRadiusCss } from './css-generators.lib';
+
+describe('gradients', () => {
+  const stops = [{ color: '#ffffff', pos: 0 }, { color: '#000000', pos: 100 }];
+  it('builds a linear gradient', () => {
+    expect(linearGradientCss(90, stops)).toBe('linear-gradient(90deg, #ffffff 0%, #000000 100%)');
+  });
+  it('builds a radial gradient', () => {
+    expect(radialGradientCss('circle', stops)).toBe('radial-gradient(circle, #ffffff 0%, #000000 100%)');
+  });
+});
+
+describe('boxShadowCss', () => {
+  it('composes offsets, blur, spread and color', () => {
+    expect(boxShadowCss({ x: 2, y: 4, blur: 8, spread: 0, color: 'rgba(0,0,0,0.3)', inset: false }))
+      .toBe('2px 4px 8px 0px rgba(0,0,0,0.3)');
+  });
+  it('prefixes inset', () => {
+    expect(boxShadowCss({ x: 0, y: 0, blur: 5, spread: 1, color: '#333', inset: true }))
+      .toBe('inset 0px 0px 5px 1px #333');
+  });
+});
+
+describe('borderRadiusCss', () => {
+  it('collapses equal corners to one value', () => {
+    expect(borderRadiusCss(8, 8, 8, 8)).toBe('8px');
+  });
+  it('lists four corners when they differ', () => {
+    expect(borderRadiusCss(4, 8, 12, 16)).toBe('4px 8px 12px 16px');
+  });
+});
diff --git a/src/tools/dev/css-generators.lib.ts b/src/tools/dev/css-generators.lib.ts
new file mode 100644
index 0000000..e6d5d2e
--- /dev/null
+++ b/src/tools/dev/css-generators.lib.ts
@@ -0,0 +1,34 @@
+/** Pure CSS-string builders for the CSS Generator tool. */
+
+export interface GradientStop { color: string; pos: number }
+
+/** `linear-gradient(90deg, #fff 0%, #000 100%)` */
+export function linearGradientCss(angle: number, stops: GradientStop[]): string {
+  const s = stops.map(x => `${x.color} ${x.pos}%`).join(', ');
+  return `linear-gradient(${angle}deg, ${s})`;
+}
+
+/** `radial-gradient(circle, #fff 0%, #000 100%)` */
+export function radialGradientCss(shape: 'circle' | 'ellipse', stops: GradientStop[]): string {
+  const s = stops.map(x => `${x.color} ${x.pos}%`).join(', ');
+  return `radial-gradient(${shape}, ${s})`;
+}
+
+export interface BoxShadow {
+  x: number; y: number; blur: number; spread: number; color: string; inset: boolean;
+}
+
+/** `inset 2px 2px 8px 0px rgba(0,0,0,0.3)` */
+export function boxShadowCss(o: BoxShadow): string {
+  return `${o.inset ? 'inset ' : ''}${o.x}px ${o.y}px ${o.blur}px ${o.spread}px ${o.color}`;
+}
+
+/**
+ * Border-radius shorthand. Collapses to the shortest equivalent form:
+ * one value when all equal, else the full four-corner list.
+ */
+export function borderRadiusCss(tl: number, tr: number, br: number, bl: number, unit = 'px'): string {
+  const u = (n: number) => `${n}${unit}`;
+  if (tl === tr && tr === br && br === bl) return u(tl);
+  return `${u(tl)} ${u(tr)} ${u(br)} ${u(bl)}`;
+}
diff --git a/src/tools/dev/datauri.lib.test.ts b/src/tools/dev/datauri.lib.test.ts
new file mode 100644
index 0000000..7364875
--- /dev/null
+++ b/src/tools/dev/datauri.lib.test.ts
@@ -0,0 +1,33 @@
+import { describe, it, expect } from 'vitest';
+import { parseDataUri, decodedSize, toCssBackground, toImgTag } from './datauri.lib';
+
+describe('decodedSize', () => {
+  it.each([
+    ['TWFu', 3],      // "Man"
+    ['TWE=', 2],      // "Ma"
+    ['TQ==', 1],      // "M"
+    ['', 0],
+  ])('%s → %d bytes', (b64, size) => {
+    expect(decodedSize(b64)).toBe(size);
+  });
+});
+
+describe('parseDataUri', () => {
+  it('splits mime and payload', () => {
+    const r = parseDataUri('data:image/png;base64,TWFu');
+    expect(r).toEqual({ mime: 'image/png', base64: 'TWFu', bytes: 3 });
+  });
+  it('returns null for non-base64 data URIs', () => {
+    expect(parseDataUri('data:text/plain,hello')).toBeNull();
+    expect(parseDataUri('https://example.com/a.png')).toBeNull();
+  });
+});
+
+describe('wrappers', () => {
+  it('builds a CSS background', () => {
+    expect(toCssBackground('data:image/png;base64,AAAA')).toBe('background-image: url("data:image/png;base64,AAAA");');
+  });
+  it('builds an img tag', () => {
+    expect(toImgTag('data:image/png;base64,AAAA', 'logo')).toBe('<img src="data:image/png;base64,AAAA" alt="logo" />');
+  });
+});
diff --git a/src/tools/dev/datauri.lib.ts b/src/tools/dev/datauri.lib.ts
new file mode 100644
index 0000000..a9f71ac
--- /dev/null
+++ b/src/tools/dev/datauri.lib.ts
@@ -0,0 +1,34 @@
+/** Pure helpers for the Image → Base64 / Data-URI tool. */
+
+export interface ParsedDataUri {
+  mime: string;
+  base64: string;
+  /** Decoded byte length. */
+  bytes: number;
+}
+
+/** Parse a `data:<mime>;base64,<payload>` URI. Returns null if not base64 data URI. */
+export function parseDataUri(uri: string): ParsedDataUri | null {
+  const m = /^data:([^;,]+)(;[^,]*)?;base64,(.*)$/s.exec(uri.trim());
+  if (!m) return null;
+  const base64 = m[3];
+  return { mime: m[1], base64, bytes: decodedSize(base64) };
+}
+
+/** Decoded byte length of a base64 string, without actually decoding it. */
+export function decodedSize(base64: string): number {
+  const clean = base64.replace(/[^A-Za-z0-9+/=]/g, '');
+  if (clean.length === 0) return 0;
+  const padding = clean.endsWith('==') ? 2 : clean.endsWith('=') ? 1 : 0;
+  return Math.floor((clean.length * 3) / 4) - padding;
+}
+
+/** Wrap a data URI as a CSS background-image declaration. */
+export function toCssBackground(dataUri: string): string {
+  return `background-image: url("${dataUri}");`;
+}
+
+/** Wrap a data URI as an <img> tag. */
+export function toImgTag(dataUri: string, alt = ''): string {
+  return `<img src="${dataUri}" alt="${alt}" />`;
+}
diff --git a/src/tools/dev/fancytext.lib.test.ts b/src/tools/dev/fancytext.lib.test.ts
new file mode 100644
index 0000000..4e9785c
--- /dev/null
+++ b/src/tools/dev/fancytext.lib.test.ts
@@ -0,0 +1,42 @@
+import { describe, it, expect } from 'vitest';
+import { transform, allStyles, STYLES } from './fancytext.lib';
+
+describe('transform', () => {
+  it('bold maps letters and digits', () => {
+    expect(transform('AB', 'bold')).toBe(String.fromCodePoint(0x1d400, 0x1d401));
+    expect(transform('0', 'bold')).toBe(String.fromCodePoint(0x1d7ce));
+  });
+
+  it('italic uses the Letterlike exception for h', () => {
+    expect(transform('h', 'italic')).toBe('ℎ');
+    expect(transform('a', 'italic')).toBe(String.fromCodePoint(0x1d44e));
+  });
+
+  it('double-struck uses exceptions', () => {
+    expect(transform('C', 'doubleStruck')).toBe('ℂ');
+    expect(transform('A', 'doubleStruck')).toBe(String.fromCodePoint(0x1d538));
+  });
+
+  it('circled digits map 0 → ⓪ and 1 → ①', () => {
+    expect(transform('0', 'circled')).toBe('⓪');
+    expect(transform('1', 'circled')).toBe('①');
+  });
+
+  it('combining styles append one mark per character', () => {
+    expect(transform('ab', 'strikethrough')).toBe('a̶b̶');
+    expect(transform('ab', 'underline')).toBe('a̲b̲');
+  });
+
+  it('passes through characters it does not map', () => {
+    expect(transform('a b!', 'bold')).toBe(String.fromCodePoint(0x1d41a) + ' ' + String.fromCodePoint(0x1d41b) + '!');
+  });
+});
+
+describe('allStyles', () => {
+  it('returns one entry per style', () => {
+    const r = allStyles('hi');
+    expect(r).toHaveLength(STYLES.length);
+    expect(r[0].id).toBe('bold');
+    expect(r[0].output).toBe(transform('hi', 'bold'));
+  });
+});
diff --git a/src/tools/dev/fancytext.lib.ts b/src/tools/dev/fancytext.lib.ts
new file mode 100644
index 0000000..30a6356
--- /dev/null
+++ b/src/tools/dev/fancytext.lib.ts
@@ -0,0 +1,76 @@
+/**
+ * Pure Unicode "fancy text" transforms — maps A–Z/a–z/0–9 to styled Unicode
+ * variants (bold, italic, script, etc.) used for social-media bios and posts.
+ * These are real Unicode code points, not fonts, so they copy/paste anywhere.
+ */
+
+export type StyleId =
+  | 'bold' | 'italic' | 'boldItalic' | 'script' | 'doubleStruck'
+  | 'monospace' | 'fullwidth' | 'circled' | 'strikethrough' | 'underline';
+
+export const STYLES: { id: StyleId; label: string }[] = [
+  { id: 'bold', label: 'Bold' },
+  { id: 'italic', label: 'Italic' },
+  { id: 'boldItalic', label: 'Bold Italic' },
+  { id: 'script', label: 'Script' },
+  { id: 'doubleStruck', label: 'Double-struck' },
+  { id: 'monospace', label: 'Monospace' },
+  { id: 'fullwidth', label: 'Full-width' },
+  { id: 'circled', label: 'Circled' },
+  { id: 'strikethrough', label: 'Strikethrough' },
+  { id: 'underline', label: 'Underline' },
+];
+
+interface AlphaMap {
+  U: number;   // base code point for 'A'
+  L: number;   // base code point for 'a'
+  D?: number;  // base code point for '0' (omit if digits unsupported)
+  ex?: Record<string, string>; // characters that live outside the contiguous block
+}
+
+// Unicode reserves some mathematical letters in the Letterlike Symbols block,
+// leaving holes in the otherwise-contiguous ranges — patched via `ex`.
+const MAPS: Partial<Record<StyleId, AlphaMap>> = {
+  bold: { U: 0x1d400, L: 0x1d41a, D: 0x1d7ce },
+  italic: { U: 0x1d434, L: 0x1d44e, ex: { h: 'ℎ' } },
+  boldItalic: { U: 0x1d468, L: 0x1d482 },
+  monospace: { U: 0x1d670, L: 0x1d68a, D: 0x1d7f6 },
+  fullwidth: { U: 0xff21, L: 0xff41, D: 0xff10 },
+  doubleStruck: {
+    U: 0x1d538, L: 0x1d552, D: 0x1d7d8,
+    ex: { C: 'ℂ', H: 'ℍ', N: 'ℕ', P: 'ℙ', Q: 'ℚ', R: 'ℝ', Z: 'ℤ' },
+  },
+  script: {
+    U: 0x1d49c, L: 0x1d4b6,
+    ex: { B: 'ℬ', E: 'ℰ', F: 'ℱ', H: 'ℋ', I: 'ℐ', L: 'ℒ', M: 'ℳ', R: 'ℛ', e: 'ℯ', g: 'ℊ', o: 'ℴ' },
+  },
+  circled: { U: 0x24b6, L: 0x24d0 }, // digits handled specially (⓪ / ①…)
+};
+
+/** Transform ASCII letters/digits in `text` into the given Unicode style. */
+export function transform(text: string, style: StyleId): string {
+  if (style === 'strikethrough') return [...text].map(c => c + '̶').join('');
+  if (style === 'underline') return [...text].map(c => c + '̲').join('');
+
+  const m = MAPS[style];
+  if (!m) return text;
+
+  let out = '';
+  for (const ch of text) {
+    if (m.ex && ch in m.ex) { out += m.ex[ch]; continue; }
+    const code = ch.codePointAt(0)!;
+    if (ch >= 'A' && ch <= 'Z') out += String.fromCodePoint(m.U + code - 65);
+    else if (ch >= 'a' && ch <= 'z') out += String.fromCodePoint(m.L + code - 97);
+    else if (ch >= '0' && ch <= '9') {
+      if (style === 'circled') out += code === 48 ? '⓪' : String.fromCodePoint(0x2460 + code - 49);
+      else if (m.D !== undefined) out += String.fromCodePoint(m.D + code - 48);
+      else out += ch;
+    } else out += ch;
+  }
+  return out;
+}
+
+/** Every style applied to the same input — for a preview list. */
+export function allStyles(text: string): { id: StyleId; label: string; output: string }[] {
+  return STYLES.map(s => ({ ...s, output: transform(text, s.id) }));
+}
diff --git a/src/tools/dev/htmlmd.lib.test.ts b/src/tools/dev/htmlmd.lib.test.ts
new file mode 100644
index 0000000..5498fd1
--- /dev/null
+++ b/src/tools/dev/htmlmd.lib.test.ts
@@ -0,0 +1,23 @@
+import { describe, it, expect } from 'vitest';
+import { htmlToMarkdown, markdownToHtml } from './htmlmd.lib';
+
+describe('htmlToMarkdown', () => {
+  it('converts headings and emphasis', async () => {
+    expect(await htmlToMarkdown('<h1>Hi</h1>')).toBe('# Hi');
+    expect(await htmlToMarkdown('<strong>bold</strong>')).toBe('**bold**');
+  });
+  it('converts links', async () => {
+    expect(await htmlToMarkdown('<a href="https://x.com">x</a>')).toBe('[x](https://x.com)');
+  });
+});
+
+describe('markdownToHtml', () => {
+  it('renders headings and emphasis', async () => {
+    expect(await markdownToHtml('# Hi')).toContain('<h1>Hi</h1>');
+    expect(await markdownToHtml('**b**')).toContain('<strong>b</strong>');
+  });
+  it('sanitizes dangerous markup', async () => {
+    const out = await markdownToHtml('<script>alert(1)</script>');
+    expect(out).not.toContain('<script>');
+  });
+});
diff --git a/src/tools/dev/htmlmd.lib.ts b/src/tools/dev/htmlmd.lib.ts
new file mode 100644
index 0000000..58f256d
--- /dev/null
+++ b/src/tools/dev/htmlmd.lib.ts
@@ -0,0 +1,20 @@
+/**
+ * HTML ↔ Markdown conversion. The heavy libraries (turndown, marked) are
+ * dynamic-imported so they stay out of the island's initial chunk. Markdown
+ * output is rendered to HTML and sanitized with DOMPurify.
+ */
+
+/** Convert an HTML string to Markdown. */
+export async function htmlToMarkdown(html: string): Promise<string> {
+  const Turndown = (await import('turndown')).default;
+  const service = new Turndown({ headingStyle: 'atx', codeBlockStyle: 'fenced', bulletListMarker: '-' });
+  return service.turndown(html).trim();
+}
+
+/** Render a Markdown string to sanitized HTML. */
+export async function markdownToHtml(md: string): Promise<string> {
+  const { marked } = await import('marked');
+  const DOMPurify = (await import('dompurify')).default;
+  const raw = await marked.parse(md);
+  return DOMPurify.sanitize(raw).trim();
+}