diff --git a/docs/.vitepress/theme/components/playground/MagoPlayground.vue b/docs/.vitepress/theme/components/playground/MagoPlayground.vue
index 1da79c79..15996338 100644
--- a/docs/.vitepress/theme/components/playground/MagoPlayground.vue
+++ b/docs/.vitepress/theme/components/playground/MagoPlayground.vue
@@ -3,6 +3,7 @@ import { onMounted, onUnmounted, watch, ref } from 'vue';
 import { useMagoWasm } from '../../composables/useMagoWasm.js';
 import { createPlaygroundState } from '../../composables/usePlaygroundState.js';
 import { useUrlState } from '../../composables/useUrlState.js';
+import { useMagoTasks } from '../../composables/useMagoTasks.js';
 import PlaygroundToolbar from './PlaygroundToolbar.vue';
 import PlaygroundSettings from './PlaygroundSettings.vue';
 import PlaygroundEditor from './PlaygroundEditor.vue';
@@ -11,7 +12,8 @@ import PlaygroundOutput from './PlaygroundOutput.vue';
 const store = createPlaygroundState();
 const { state } = store;
 
-const { isLoading: wasmLoading, isReady: wasmReady, analyze, format, loadWasm, getRules } = useMagoWasm();
+const { isLoading: wasmLoading, isReady: wasmReady, loadWasm, getRules } = useMagoWasm();
+const { analyze, format } = useMagoTasks();
 const { shareError, shareSuccess, isSharing, shareUrl, generateShareUrl, loadFromUrl, copyToClipboard, clearShareUrl, shouldClearShareUrl } = useUrlState();
 
 const hasRunOnce = ref(false);
@@ -26,6 +28,12 @@ onMounted(async () => {
     store.restoreState(urlState);
   }
 
+  const params = new URLSearchParams(window.location.search);
+  const tabParam = params.get('tab');
+  if (tabParam === 'issues' || tabParam === 'formatter') {
+    store.setActiveTab(tabParam);
+  }
+
   try {
     await loadWasm();
     store.setWasmReady(true);
@@ -51,6 +59,7 @@ watch(wasmReady, async (ready) => {
       console.error('Failed to load linter rules:', e);
     }
     runAnalysis();
+    updateFormattedPreview();
   }
 });
 
@@ -89,12 +98,12 @@ watch(
 );
 
 async function runAnalysis() {
-  if (!wasmReady.value) return;
+  if (!wasmReady.value || state.activeTab !== 'issues') return;
 
   store.setLoading(true);
   try {
     const results = await analyze(state.code, state.settings);
-    store.setResults(results);
+    store.setAnalyzerResults(results);
   } catch (e) {
     console.error('Analysis failed:', e);
     store.setResults({
@@ -107,13 +116,23 @@ async function runAnalysis() {
   }
 }
 
+async function updateFormattedPreview() {
+  if (!wasmReady.value || state.activeTab !== 'formatter') return;
+  try {
+    const res = await format(state.code, state.settings.phpVersion);
+    store.setFormatterResults(res);
+  } catch (e) {
+    store.setFormatterResults({ code: state.code || '', timeMs: null, error: e?.message || 'Format failed' });
+  }
+}
+
 async function handleFormat() {
   if (!wasmReady.value || state.isLoading) return;
 
   store.setLoading(true);
   try {
     const formatted = await format(state.code, state.settings.phpVersion);
-    store.setCode(formatted);
+    store.setCode(formatted.code);
   } catch (e) {
     console.error('Format failed:', e);
   } finally {
@@ -162,6 +181,31 @@ function handleTabChange(tab) {
   store.setActiveTab(tab);
 }
 
+watch(
+  () => state.activeTab,
+  (tab) => {
+    const params = new URLSearchParams(window.location.search);
+    params.set('tab', tab);
+    const query = `?${params.toString()}`;
+    const url = `${window.location.pathname}${query}${window.location.hash || ''}`;
+    window.history.replaceState(null, '', url);
+
+    if (tab === 'formatter') {
+      return updateFormattedPreview();
+    } else if (tab === 'issues') {
+      return runAnalysis();
+    }
+  }
+);
+
+watch(
+  () => [state.code, state.settings.phpVersion],
+  () => {
+    updateFormattedPreview();
+  },
+  { deep: true }
+);
+
 function handleHighlightLine(range) {
   highlightedRange.value = range;
 }
@@ -237,10 +281,13 @@ onUnmounted(() => {
       />
       <PlaygroundOutput
         class="panel-output"
-        :results="state.results"
+        :analyzer-results="state.analyzerResults"
+        :formatter-results="state.formatterResults"
         :active-tab="state.activeTab"
         :is-loading="state.isLoading"
-        @update:active-tab="handleTabChange"
+        :code="state.code"
+        :php-version="state.settings.phpVersion"
+        @update-active-tab="handleTabChange"
         @highlight-line="handleHighlightLine"
       />
     </div>
diff --git a/docs/.vitepress/theme/components/playground/PlaygroundOutput.vue b/docs/.vitepress/theme/components/playground/PlaygroundOutput.vue
index b2be1960..9f4d0c02 100644
--- a/docs/.vitepress/theme/components/playground/PlaygroundOutput.vue
+++ b/docs/.vitepress/theme/components/playground/PlaygroundOutput.vue
@@ -1,8 +1,12 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, ref, onMounted, watch, nextTick } from 'vue';
 
 const props = defineProps({
-  results: {
+  analyzerResults: {
+    type: Object,
+    default: null,
+  },
+  formatterResults: {
     type: Object,
     default: null,
   },
@@ -10,11 +14,25 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  activeTab: {
+    type: String,
+    default: 'issues',
+  },
+  code: {
+    type: String,
+    default: '',
+  },
+  phpVersion: {
+    type: String,
+    default: '8.4',
+  },
 });
 
-const emit = defineEmits(['highlight-line']);
+const emit = defineEmits(['highlight-line', 'update-active-tab']);
 
 const activeFilter = ref(null);
+const formattedCodeRef = ref(null);
+let Prism = null;
 
 const severityOrder = {
   error: 0,
@@ -24,8 +42,8 @@ const severityOrder = {
 };
 
 const allIssues = computed(() => {
-  if (!props.results) return [];
-  return props.results.issues || [];
+  if (!props.analyzerResults) return [];
+  return props.analyzerResults.issues || [];
 });
 
 function matchesSource(issueSource, filterSource) {
@@ -55,16 +73,20 @@ const analyzerCount = computed(() => {
   return allIssues.value.filter((i) => i.source === 'analyzer' || i.source === 'both').length;
 });
 
-const analysisTime = computed(() => {
-  if (!props.results || props.results.analysisTimeMs === undefined) return null;
-  const ms = props.results.analysisTimeMs;
-  if (ms < 1) {
-    return `${(ms * 1000).toFixed(0)}µs`;
-  } else if (ms < 1000) {
-    return `${ms.toFixed(1)}ms`;
-  } else {
-    return `${(ms / 1000).toFixed(2)}s`;
-  }
+function formatDuration(ms) {
+  if (ms === null || ms === undefined) return null;
+  if (ms < 1) return `${(ms * 1000).toFixed(0)}µs`;
+  if (ms < 1000) return `${ms.toFixed(1)}ms`;
+  return `${(ms / 1000).toFixed(2)}s`;
+}
+
+const analysisTime = computed(() => formatDuration(props.analyzerResults?.analysisTimeMs));
+const formatTime = computed(() => formatDuration(props.formatterResults?.timeMs));
+
+const showError = computed(() => {
+  return props.activeTab === 'formatter'
+    ? Boolean(props.formatterResults?.error)
+    : Boolean(props.analyzerResults?.error);
 });
 
 function toggleFilter(source) {
@@ -75,6 +97,10 @@ function toggleFilter(source) {
   }
 }
 
+function setActiveTab(tab) {
+  emit('update-active-tab', tab);
+}
+
 function getLevelClass(level) {
   const levelLower = (level || 'note').toLowerCase();
   return `level-${levelLower}`;
@@ -123,17 +149,69 @@ function handleIssueHover(issue) {
 function handleIssueLeave() {
   emit('highlight-line', null);
 }
+
+function highlightFormatted(el) {
+  if (!el) return;
+  const code = (props.formatterResults?.code ?? props.code) || '';
+  if (Prism && Prism.languages.php) {
+    el.innerHTML = Prism.highlight(code, Prism.languages.php, 'php');
+  } else {
+    el.textContent = code;
+  }
+}
+
+onMounted(async () => {
+  if (typeof window !== 'undefined') {
+    const prismModule = await import('prismjs');
+    Prism = prismModule.default || prismModule;
+    await import('prismjs/components/prism-markup-templating');
+    await import('prismjs/components/prism-php');
+  }
+  await nextTick();
+  highlightFormatted(formattedCodeRef.value);
+});
+
+watch(
+  () => [props.activeTab, props.code, props.formatterResults?.code],
+  async () => {
+    await nextTick();
+    highlightFormatted(formattedCodeRef.value);
+  }
+);
 </script>
 
 <template>
   <div class="playground-output">
     <div class="output-header">
-      <span class="header-title">Issues</span>
+      <div class="tabs">
+        <button
+          :class="['btn', 'btn-secondary', 'tab-btn', { active: activeTab === 'issues' }]"
+          @click="setActiveTab('issues')"
+        >
+          Issues
+        </button>
+        <button
+          :class="['btn', 'btn-secondary', 'tab-btn', { active: activeTab === 'formatter' }]"
+          @click="setActiveTab('formatter')"
+        >
+          Formatter
+        </button>
+      </div>
       <div class="header-right">
-        <span v-if="analysisTime" class="analysis-time" title="Analysis time">
+        <button
+          v-if="showError"
+          class="badge error-badge"
+          title="Invalid input"
+        >
+          ERROR
+        </button>
+        <span v-if="activeTab === 'issues' && analysisTime" class="execution-time" title="Analysis time">
           ⚡ {{ analysisTime }}
         </span>
-        <div class="header-badges">
+        <span v-if="activeTab === 'formatter' && formatTime" class="execution-time" title="Format time">
+          ⚡ {{ formatTime }}
+        </span>
+        <div v-if="activeTab === 'issues'" class="header-badges">
           <button
             :class="['badge', 'linter-badge', { active: activeFilter === null || activeFilter === 'linter', inactive: activeFilter === 'analyzer' }]"
             :title="activeFilter === 'linter' ? 'Show all issues' : 'Show only linter issues'"
@@ -155,27 +233,27 @@ function handleIssueLeave() {
     </div>
 
     <div class="output-content">
-      <div v-if="isLoading" class="loading">
+      <div v-if="isLoading && activeTab === 'issues'" class="loading">
         <div class="spinner"></div>
         <span>Analyzing...</span>
       </div>
 
-      <div v-else-if="!results" class="placeholder">
+      <div v-else-if="activeTab === 'issues' && !analyzerResults" class="placeholder">
         <div class="spinner"></div>
         <p>Preparing analysis...</p>
       </div>
 
-      <div v-else-if="displayedIssues.length === 0 && allIssues.length === 0" class="no-issues">
+      <div v-else-if="activeTab === 'issues' && displayedIssues.length === 0 && allIssues.length === 0" class="no-issues">
         <span class="success-icon">✓</span>
         <p>No issues found!</p>
       </div>
 
-      <div v-else-if="displayedIssues.length === 0 && allIssues.length > 0" class="no-issues filtered">
+      <div v-else-if="activeTab === 'issues' && displayedIssues.length === 0 && allIssues.length > 0" class="no-issues filtered">
         <p>No {{ activeFilter }} issues to show</p>
         <button class="clear-filter" @click="activeFilter = null">Show all issues</button>
       </div>
 
-      <div v-else class="issues-list">
+      <div v-if="activeTab === 'issues' && displayedIssues.length > 0" class="issues-list">
         <div
           v-for="(issue, index) in displayedIssues"
           :key="index"
@@ -216,6 +294,10 @@ function handleIssueLeave() {
           </div>
         </div>
       </div>
+
+      <div v-if="activeTab === 'formatter'" class="formatted-view">
+        <pre class="formatted-pre"><code ref="formattedCodeRef" class="language-php"></code></pre>
+      </div>
     </div>
   </div>
 </template>
@@ -237,6 +319,41 @@ function handleIssueLeave() {
   background: var(--vp-c-bg-soft);
 }
 
+.tabs {
+  display: flex;
+  gap: 8px;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 16px;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.btn-secondary {
+  background: var(--vp-c-bg);
+  color: var(--vp-c-text-1);
+  border: 1px solid var(--vp-c-divider);
+}
+
+.tab-btn:hover {
+  background: var(--vp-c-bg-soft);
+  border-color: #10b981;
+}
+
+.tab-btn.active {
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand-1);
+  border-color: var(--vp-c-brand-1);
+}
+
 .header-title {
   font-size: 14px;
   font-weight: 600;
@@ -249,7 +366,7 @@ function handleIssueLeave() {
   gap: 12px;
 }
 
-.analysis-time {
+.execution-time {
   font-size: 12px;
   font-weight: 500;
   color: var(--vp-c-text-2);
@@ -311,12 +428,85 @@ function handleIssueLeave() {
   background: rgba(168, 85, 247, 0.05);
 }
 
+.error-badge {
+  background: rgba(220, 38, 38, 0.1);
+  color: #dc2626;
+}
+
 .output-content {
   flex: 1;
   overflow: auto;
   padding: 0;
 }
 
+.formatted-view {
+  padding: 0;
+  height: 100%;
+  overflow: auto;
+}
+
+.formatted-pre {
+  margin: 0;
+  padding: 16px;
+  height: 100%;
+  background: var(--vp-c-bg);
+}
+
+.formatted-pre :deep(.token.comment),
+.formatted-pre :deep(.token.prolog),
+.formatted-pre :deep(.token.doctype),
+.formatted-pre :deep(.token.cdata) {
+  color: var(--vp-c-text-3);
+}
+
+.formatted-pre :deep(.token.punctuation) {
+  color: var(--vp-c-text-2);
+}
+
+.formatted-pre :deep(.token.property),
+.formatted-pre :deep(.token.tag),
+.formatted-pre :deep(.token.boolean),
+.formatted-pre :deep(.token.number),
+.formatted-pre :deep(.token.constant),
+.formatted-pre :deep(.token.symbol),
+.formatted-pre :deep(.token.deleted) {
+  color: #e06c75;
+}
+
+.formatted-pre :deep(.token.selector),
+.formatted-pre :deep(.token.attr-name),
+.formatted-pre :deep(.token.string),
+.formatted-pre :deep(.token.char),
+.formatted-pre :deep(.token.builtin),
+.formatted-pre :deep(.token.inserted) {
+  color: #98c379;
+}
+
+.formatted-pre :deep(.token.operator),
+.formatted-pre :deep(.token.entity),
+.formatted-pre :deep(.token.url),
+.formatted-pre :deep(.language-css .token.string),
+.formatted-pre :deep(.style .token.string) {
+  color: #56b6c2;
+}
+
+.formatted-pre :deep(.token.atrule),
+.formatted-pre :deep(.token.attr-value),
+.formatted-pre :deep(.token.keyword) {
+  color: #c678dd;
+}
+
+.formatted-pre :deep(.token.function),
+.formatted-pre :deep(.token.class-name) {
+  color: #61afef;
+}
+
+.formatted-pre :deep(.token.regex),
+.formatted-pre :deep(.token.important),
+.formatted-pre :deep(.token.variable) {
+  color: #c678dd;
+}
+
 .loading,
 .placeholder,
 .no-issues {
diff --git a/docs/.vitepress/theme/composables/useMagoTasks.js b/docs/.vitepress/theme/composables/useMagoTasks.js
new file mode 100644
index 00000000..59ef9b66
--- /dev/null
+++ b/docs/.vitepress/theme/composables/useMagoTasks.js
@@ -0,0 +1,49 @@
+import { useMagoWasm } from './useMagoWasm.js';
+
+export function useMagoTasks() {
+  const { analyze: doAnalyze, format: doFormat, loadWasm, isReady } = useMagoWasm();
+
+  async function ensureReady() {
+    await loadWasm();
+    return isReady.value;
+  }
+
+  async function withTiming(fn) {
+    const start = performance.now();
+    try {
+      const result = await fn();
+      const end = performance.now();
+      return { result, timeMs: end - start, error: null };
+    } catch (e) {
+      const end = performance.now();
+      return { result: null, timeMs: end - start, error: e?.message || 'Task failed' };
+    }
+  }
+
+  async function analyze(code, settings) {
+    await ensureReady();
+    const { result, timeMs, error } = await withTiming(() => doAnalyze(code, settings));
+    if (error) {
+      return { issues: [], analysisTimeMs: timeMs, error };
+    }
+    return {
+      issues: result?.issues || [],
+      analysisTimeMs: timeMs ?? null,
+      error: null,
+    };
+  }
+
+  async function format(code, phpVersion) {
+    await ensureReady();
+    const { result, timeMs, error } = await withTiming(() => doFormat(code, phpVersion));
+    if (error) {
+      return { code, timeMs, error };
+    }
+    return { code: result, timeMs, error: null };
+  }
+  
+  return {
+    analyze,
+    format,
+  };
+}
diff --git a/docs/.vitepress/theme/composables/usePlaygroundState.js b/docs/.vitepress/theme/composables/usePlaygroundState.js
index c333d827..b6ee6a84 100644
--- a/docs/.vitepress/theme/composables/usePlaygroundState.js
+++ b/docs/.vitepress/theme/composables/usePlaygroundState.js
@@ -54,10 +54,11 @@ export function createPlaygroundState(initialCode = DEFAULT_CODE) {
         disabledRules: [],
       },
     },
-    results: null,
+    analyzerResults: null,
+    formatterResults: { code: "", timeMs: null, error: null },
     isLoading: false,
     wasmReady: false,
-    activeTab: "linter",
+    activeTab: "issues",
     settingsOpen: false,
     availableRules: [],
   });
@@ -97,8 +98,12 @@ export function createPlaygroundState(initialCode = DEFAULT_CODE) {
       state.availableRules = rules;
     },
 
-    setResults(results) {
-      state.results = results;
+    setAnalyzerResults(results) {
+      state.analyzerResults = results;
+    },
+
+    setFormatterResults(result) {
+      state.formatterResults = result;
     },
 
     setLoading(loading) {
diff --git a/docs/.vitepress/theme/composables/useUrlState.js b/docs/.vitepress/theme/composables/useUrlState.js
index fbb9d763..0d59278c 100644
--- a/docs/.vitepress/theme/composables/useUrlState.js
+++ b/docs/.vitepress/theme/composables/useUrlState.js
@@ -54,10 +54,14 @@ export function useUrlState() {
       }
 
       const { uuid } = await response.json();
-      shareUrl.value = `${window.location.origin}${window.location.pathname}#${uuid}`;
+      const params = new URLSearchParams(window.location.search);
+      const tab = state.t || params.get('tab') || 'issues';
+      params.set('tab', tab);
+      const query = `?${params.toString()}`;
+      shareUrl.value = `${window.location.origin}${window.location.pathname}${query}#${uuid}`;
       lastStateHash = stateHash;
 
-      window.history.replaceState(null, '', `#${uuid}`);
+      window.history.replaceState(null, '', `${query}#${uuid}`);
 
       return shareUrl.value;
     } catch (e) {
diff --git a/flake.nix b/flake.nix
index 0c11b380..130c54c7 100644
--- a/flake.nix
+++ b/flake.nix
@@ -25,6 +25,7 @@
             pkgs.openssl
             pkgs.just
             pkgs.wasm-pack
+            pkgs.lld
             php
             composer
           ] ++ pkgs.lib.optionals isDarwin [