+      <div
+        class="ml-4 shiki pointer-events-none"
+        dangerouslySetInnerHTML={{ __html }}
+        style={{
+          whiteSpace: "pre-wrap",
+          fontFamily: "monospace",
+        }}
+      />
+    </div>
+  );
+}
diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx
new file mode 100644
index 0000000..a319eff
--- /dev/null
+++ b/src/components/Editor.tsx
@@ -0,0 +1,32 @@
+import LanguageSelect from "./LanguageSelect";
+import SaveButton from "./SaveButton";
+import { $themeColorsStore } from "../utils/theme";
+import ThemeSelect from "./ThemeSelect";
+import { useStore } from "@nanostores/preact";
+import CodeBlock from "./CodeBlock";
+
+export default function Editor() {
+  const colors = useStore($themeColorsStore);
+
+  return (
+    <div style={{ backgroundColor: colors.background }} class="h-screen">
+      <div class="mb-4 p-2" style={{ backgroundColor: colors.navbar }}>
+        <nav
+          class="flex justify-between mx-4"
+          style={{ color: colors.primary }}
+        >
+          <div class="flex justify-between">
+            <SaveButton />
+          </div>
+          <div class="flex gap-2">
+            <LanguageSelect />
+            <ThemeSelect />
+            <a href="github.com/durocodes/spongebin">[source]</a>
+          </div>
+        </nav>
+      </div>
+
+      <CodeBlock />
+    </div>
+  );
+}
diff --git a/src/components/LanguageSelect.tsx b/src/components/LanguageSelect.tsx
new file mode 100644
index 0000000..a30c4f3
--- /dev/null
+++ b/src/components/LanguageSelect.tsx
@@ -0,0 +1,13 @@
+import { bundledLanguages } from "shiki";
+import MenuButton from "./MenuButton";
+import { $langStore } from "../utils/theme";
+
+export default function LanguageSelect() {
+  return (
+    <MenuButton
+      label="language"
+      ids={Object.keys(bundledLanguages)}
+      $store={$langStore}
+    />
+  );
+}
diff --git a/src/components/MenuButton.tsx b/src/components/MenuButton.tsx
new file mode 100644
index 0000000..bfba882
--- /dev/null
+++ b/src/components/MenuButton.tsx
@@ -0,0 +1,127 @@
+import { useEffect, useRef, useState } from "preact/hooks";
+import type { PreinitializedWritableAtom } from "nanostores";
+import { $themeColorsStore } from "../utils/theme";
+import { useStore } from "@nanostores/preact";
+
+export interface MenuButtonProps {
+  label: string;
+  ids: string[];
+  minWidth?: string;
+  $store: PreinitializedWritableAtom<string>;
+}
+
+export default function MenuButton({
+  label,
+  ids,
+  minWidth,
+  $store,
+}: MenuButtonProps) {
+  const [open, setOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const colors = useStore($themeColorsStore);
+
+  useEffect(() => {
+    const listener = () => setOpen(false);
+    window.addEventListener("click", listener);
+    return () => window.removeEventListener("click", listener);
+  }, []);
+
+  useEffect(() => {
+    if (open && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [open]);
+
+  function toggleOpen(e: MouseEvent) {
+    e.stopPropagation();
+    setOpen(!open);
+  }
+
+  function select(e: MouseEvent | KeyboardEvent, id: string) {
+    e.stopPropagation();
+    setOpen(false);
+    $store.set(id);
+  }
+
+  function handleInputClick(e: MouseEvent) {
+    e.stopPropagation();
+  }
+
+  function handleKeyDown(e: KeyboardEvent) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      if (filteredIds.length > 0) {
+        select(e, filteredIds[0]);
+      }
+    }
+  }
+
+  const filteredIds = ids.filter((id) =>
+    id.toLowerCase().includes(searchTerm.toLowerCase()),
+  );
+
+  return (
+    <div class="relative inline-block">
+      <button
+        class="rounded focus:outline-none"
+        style={{ color: colors.primary }}
+        onClick={toggleOpen}
+      >
+        <span class="hidden md:inline">
+          [{label}: {$store.get()}]
+        </span>
+        <span class="md:hidden">[{$store.get()}]</span>
+      </button>
+      {open && (
+        <div
+          class="absolute right-0 z-10 mt-4 rounded-xl max-h-60 overflow-auto w-full"
+          style={{
+            backgroundColor: colors.navbar,
+            minWidth: minWidth ?? "13rem",
+          }}
+        >
+          <input
+            type="text"
+            class="w-full px-4 py-2 border-b focus:outline-none"
+            style={{
+              backgroundColor: colors.navbar,
+              borderColor: `${colors.primary}aa`,
+              color: colors.primary,
+            }}
+            placeholder="type to search..."
+            value={searchTerm}
+            onInput={(e) => setSearchTerm((e.target as HTMLInputElement).value)}
+            onClick={handleInputClick}
+            onKeyDown={handleKeyDown}
+            ref={inputRef}
+          />
+          <ul>
+            {filteredIds.length > 0 ? (
+              filteredIds.map((id) => (
+                <li
+                  key={id}
+                  class={`px-4 py-2 cursor-pointer ${id === $store.get() ? "font-bold" : ""}`}
+                  style={{
+                    backgroundColor:
+                      id === $store.get()
+                        ? `${colors.background}77`
+                        : `${colors.navbar}`,
+                  }}
+                  onClick={(e) => select(e, id)}
+                >
+                  {id === $store.get() ? `*${id}` : id}
+                </li>
+              ))
+            ) : (
+              <li class="px-4 py-2" style={{ color: colors.primary }}>
+                No results
+              </li>
+            )}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/SaveButton.tsx b/src/components/SaveButton.tsx
new file mode 100644
index 0000000..7b898fa
--- /dev/null
+++ b/src/components/SaveButton.tsx
@@ -0,0 +1,50 @@
+import { useStore } from "@nanostores/preact";
+import { useEffect, useState } from "preact/hooks";
+import { unwrapOr } from "../utils/result";
+import { encode } from "../utils/encode";
+import { $codeStore, $langStore, $themeStore } from "../utils/theme";
+
+export default function SaveButton() {
+  const code = useStore($codeStore);
+  const [saving, setSaving] = useState(false);
+  const [buttonText, setButtonText] = useState("[save]");
+
+  const save = async () => {
+    setSaving(true);
+
+    console.log({ code });
+
+    const result = await unwrapOr(encode(code), "");
+    const url = `${window.location.origin}/?l=${$langStore.get()}&t=${$themeStore.get()}&c=${result}`;
+
+    navigator.clipboard.writeText(url);
+
+    setButtonText("[link copied!]");
+
+    setTimeout(() => {
+      setButtonText("[save]");
+      setSaving(false);
+    }, 5000);
+  };
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.ctrlKey && event.key === "s") {
+        event.preventDefault();
+        save();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [code, saving]);
+
+  return (
+    <button class="rounded focus:outline-none" disabled={saving} onClick={save}>
+      {buttonText}
+    </button>
+  );
+}
diff --git a/src/components/ThemeSelect.tsx b/src/components/ThemeSelect.tsx
new file mode 100644
index 0000000..51885ff
--- /dev/null
+++ b/src/components/ThemeSelect.tsx
@@ -0,0 +1,13 @@
+import { bundledThemes } from "shiki";
+import MenuButton from "./MenuButton";
+import { $themeStore } from "../utils/theme";
+
+export default function ThemeSelect() {
+  return (
+    <MenuButton
+      label="theme"
+      ids={Object.keys(bundledThemes)}
+      $store={$themeStore}
+    />
+  );
+}
diff --git a/src/env.d.ts b/src/env.d.ts
new file mode 100644
index 0000000..e16c13c
--- /dev/null
+++ b/src/env.d.ts
@@ -0,0 +1 @@
+/// <reference path="../.astro/types.d.ts" />
diff --git a/src/pages/index.astro b/src/pages/index.astro
new file mode 100644
index 0000000..4c878c8
--- /dev/null
+++ b/src/pages/index.astro
@@ -0,0 +1,48 @@
+---
+import "../styles/global.css";
+import { type BundledTheme } from "shiki";
+import Editor from "../components/Editor";
+import { $codeStore, $langStore, $themeStore, parseLang } from "../utils/theme";
+import { decode } from "../utils/encode";
+import { unwrapOr } from "../utils/result";
+
+const langParam = Astro.url.searchParams.get("l") ?? "txt";
+const themeParam = Astro.url.searchParams.get("t") ?? "github-dark-default";
+const codeParam =
+  Astro.url.searchParams.get("c") ??
+  "H4sIAAAAAAAAE_PLV3DOT0lVCCjKL8tMSU0BAGFoYswQAAAA";
+
+const code = await unwrapOr(
+  decode(codeParam),
+  "H4sIAAAAAAAAE_PLV3DOT0lVCCjKL8tMSU0BAGFoYswQAAAA",
+);
+
+$codeStore.set(code);
+$langStore.set(parseLang(langParam));
+$themeStore.set(themeParam as BundledTheme);
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+
+    <title>sponge bin</title>
+    <meta name="theme-color" content="#FFCC4D" />
+    <meta name="description" content="a pastebin made of sponge" />
+
+    <meta property="og:title" content="sponge bin" />
+    <meta property="og:description" content="a pastebin made of sponge" />
+    <meta
+      property="og:image"
+      content={new URL("/images/sponge.png", Astro.url)}
+    />
+    <meta property="og:url" content={Astro.url} />
+  </head>
+
+  <body>
+    <Editor client:load />
+  </body>
+</html>
diff --git a/src/styles/global.css b/src/styles/global.css
new file mode 100644
index 0000000..c534ac9
--- /dev/null
+++ b/src/styles/global.css
@@ -0,0 +1,19 @@
+* {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+}
+
+code {
+  counter-reset: step;
+  counter-increment: step 0;
+}
+
+code .line::before {
+  content: counter(step);
+  counter-increment: step;
+  width: 1rem;
+  margin-right: 1.5rem;
+  display: inline-block;
+  text-align: right;
+  color: rgba(115, 138, 148, 0.4);
+}
diff --git a/src/utils/encode.ts b/src/utils/encode.ts
new file mode 100644
index 0000000..9453a6a
--- /dev/null
+++ b/src/utils/encode.ts
@@ -0,0 +1,35 @@
+import { tryCatch } from "./result";
+
+const processStream = async (
+  str: string,
+  format: CompressionFormat,
+  StreamConstructor: typeof CompressionStream | typeof DecompressionStream,
+  encode = true,
+) => {
+  const input = encode
+    ? new TextEncoder().encode(str)
+    : Uint8Array.from(atob(str.replace(/-/g, "+").replace(/_/g, "/")), (c) =>
+        c.charCodeAt(0),
+      );
+
+  const stream = new StreamConstructor(format);
+  const writer = stream.writable.getWriter();
+
+  writer.write(input);
+  writer.close();
+
+  const buffer = await new Response(stream.readable).arrayBuffer();
+  const base64 = encode
+    ? btoa(String.fromCharCode(...new Uint8Array(buffer)))
+    : new TextDecoder().decode(buffer);
+
+  return encode
+    ? base64.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "")
+    : base64;
+};
+
+export const encode = (str: string, format: CompressionFormat = "gzip") =>
+  tryCatch(() => processStream(str, format, CompressionStream, true));
+
+export const decode = (str: string, format: CompressionFormat = "gzip") =>
+  tryCatch(() => processStream(str, format, DecompressionStream, false));
diff --git a/src/utils/result.ts b/src/utils/result.ts
new file mode 100644
index 0000000..da715e9
--- /dev/null
+++ b/src/utils/result.ts
@@ -0,0 +1,16 @@
+export type Result<Ok, Err> =
+  | { ok: true; value: Ok }
+  | { ok: false; error: Err };
+export const Ok = <Ok>(value: Ok) => ({ ok: true, value } as const);
+export const Err = <Err>(error: Err) => ({ ok: false, error } as const);
+
+export const tryCatch = <T>(fn: () => T): Result<T, unknown> => {
+  try {
+    return Ok(fn());
+  } catch (error) {
+    return Err(error);
+  }
+};
+
+export const unwrapOr = <Ok, Err, T>(result: Result<Ok, Err>, fallback: T) =>
+  result.ok ? result.value : fallback;
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
new file mode 100644
index 0000000..0b52d99
--- /dev/null
+++ b/src/utils/theme.ts
@@ -0,0 +1,53 @@
+import { atom, computed, task } from "nanostores";
+import {
+  bundledLanguages,
+  type BundledLanguage,
+  type BundledTheme,
+  createHighlighter,
+  bundledThemes,
+} from "shiki";
+
+export const highlighter = await createHighlighter({
+  themes: Object.keys(bundledThemes),
+  langs: Object.keys(bundledLanguages),
+});
+
+export const $langStore = atom<BundledLanguage | "txt">("txt");
+export const $codeStore = atom<string>("");
+export const $themeStore = atom<BundledTheme>("github-dark-default");
+export const $themeColorsStore = computed($themeStore, (theme) =>
+  themeColors(theme),
+);
+
+export const parseLang = (lang: string | null = "txt") =>
+  Object.keys(bundledLanguages).includes(lang ?? "txt")
+    ? (lang as BundledLanguage)
+    : "txt";
+
+const navbarColor = (backgroundColor: string): string => {
+  const expandHex = (hex: string) =>
+    hex.length === 4 ? `#${[...hex.slice(1)].map((c) => c + c).join("")}` : hex;
+
+  const isLight = (hex: string) => parseInt(hex.slice(1), 16) > 0xffffff / 2;
+
+  const adjustColor = (hex: string, amt: number) => {
+    const hexCode = (parseInt(hex.slice(1), 16) + amt * 0x010101)
+      .toString(16)
+      .padStart(6, "0");
+
+    return `#${hexCode}`;
+  };
+
+  const expandedColor = expandHex(backgroundColor);
+  return adjustColor(expandedColor, isLight(expandedColor) ? -10 : 10);
+};
+
+export const themeColors = (theme: BundledTheme) => {
+  const shikiTheme = highlighter.getTheme(theme);
+
+  return {
+    background: shikiTheme.bg,
+    primary: shikiTheme.fg,
+    navbar: navbarColor(shikiTheme.bg),
+  };
+};
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
new file mode 100644
index 0000000..19f0614
--- /dev/null
+++ b/tailwind.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..c248cb8
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "preact"
+  }
+}