diff --git a/src/code-block-processor/code-block.svelte b/src/code-block-processor/code-block.svelte
new file mode 100644
index 0000000..f82e4a3
--- /dev/null
+++ b/src/code-block-processor/code-block.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+
+    import { type Segment, splitSentenceIntoSegments } from './split-sentence';
+
+    import * as styles from './style.css';
+
+    export let source: string;
+
+    let segments: Segment[] = [];
+
+    onMount(() => {
+        segments = splitSentenceIntoSegments(source.trim());
+    });
+</script>
+
+<div lang="zh-CN" class={styles.container}>
+    <div aria-hidden="true" class={styles.pinyinLine}>
+        <!-- hidden blocks -->
+    </div>
+    <div class={styles.zhCharLine}>
+        {#each segments as segment}
+            {#if segment.type === 'zh'}
+                <!-- zh blocks -->
+                {segment.zhChars}
+            {:else}
+                <span class={styles.visibleNonZhBlock}>{segment.nonZhChars}</span>
+            {/if}
+        {/each}
+    </div>
+</div>
diff --git a/src/playground.ts b/src/playground.ts
index 138dcd0..58e6dbe 100644
--- a/src/playground.ts
+++ b/src/playground.ts
@@ -1,5 +1,7 @@
 import { type HanziWriterOptions, default as HW } from 'hanzi-writer';
 
+import CodeBlock from './code-block-processor/code-block.svelte';
+
 const hwOptions: Partial<HanziWriterOptions> = {
     width: 100,
     height: 100,
@@ -31,3 +33,13 @@ btn.addEventListener('click', async () => {
 
     await c2Writer.animateCharacter();
 });
+
+const app = document.createElement('div');
+document.body.appendChild(app);
+
+new CodeBlock({
+    target: app,
+    props: {
+        source: '你好！初次见面',
+    },
+});
diff --git a/svelte.config.js b/svelte.config.js
new file mode 100644
index 0000000..65eb158
--- /dev/null
+++ b/svelte.config.js
@@ -0,0 +1,8 @@
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+
+/** @type {import('@sveltejs/vite-plugin-svelte').Options} */
+const config = {
+    preprocess: vitePreprocess(),
+};
+
+export default config;
diff --git a/vite.config.ts b/vite.config.ts
index 70764ee..6be1065 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,3 +1,4 @@
+import { svelte } from '@sveltejs/vite-plugin-svelte';
 import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
 import { defineConfig } from 'vite';
 
@@ -20,6 +21,8 @@ export default defineConfig({
         },
     },
     plugins: [
+        svelte(),
+
         vanillaExtractPlugin({
             identifiers: ({ hash }) => `zhongwenBlock_${hash}`,
         }),