diff --git a/ng-app/package.json b/ng-app/package.json
index f4619759..0b6f93b6 100644
--- a/ng-app/package.json
+++ b/ng-app/package.json
@@ -18,14 +18,22 @@
   "dependencies": {
     "@codemirror/autocomplete": "^6.17.0",
     "@codemirror/commands": "^6.6.0",
+    "@codemirror/lang-css": "^6.0.1",
+    "@codemirror/lang-html": "^6.2.0",
     "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/lang-rust": "^6.0.1",
     "@codemirror/language": "^6.10.2",
     "@codemirror/legacy-modes": "^6.4.0",
     "@codemirror/lint": "^6.8.1",
     "@codemirror/search": "^6.5.6",
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.29.1",
+    "@lezer/common": "^1.0.0",
+    "@lezer/highlight": "^1.0.0",
+    "@lezer/javascript": "^1.2.0",
+    "@lezer/lr": "^1.0.0",
     "@popperjs/core": "^2.11.8",
+    "@replit/codemirror-lang-svelte": "^6.0.0",
     "@tauri-apps/api": "2.0.0-alpha.8",
     "@tauri-apps/plugin-barcode-scanner": "2.0.0-alpha.0",
     "@tauri-apps/plugin-window": "2.0.0-alpha.1",
diff --git a/ng-app/src/apps/CodeMirrorEditor.svelte b/ng-app/src/apps/CodeMirrorEditor.svelte
index d6a0d51d..eae9fcf1 100644
--- a/ng-app/src/apps/CodeMirrorEditor.svelte
+++ b/ng-app/src/apps/CodeMirrorEditor.svelte
@@ -21,7 +21,8 @@
     } from "../store";
     import { 
         cur_tab_register_on_save,
-        cur_tab_deregister_on_save
+        cur_tab_deregister_on_save,
+        cur_tab_branch_class
     } from "../tab";
     
     import * as Y from 'yjs'
@@ -30,10 +31,23 @@
 
     import CodeMirror from "svelte-codemirror-editor";
     import { javascript } from '@codemirror/lang-javascript'
+    import { rust } from '@codemirror/lang-rust'
+    import { svelte } from "@replit/codemirror-lang-svelte";
     import {basicSetup} from "codemirror"
 
     export let commits = {};
 
+    const class_to_lang = {
+        "code:js" : javascript(),
+        "code:ts" : javascript({"typescript":true}),
+        "code:rust" : rust(),
+        "code:svelte" : svelte(),
+        "code:react" : javascript({"jsx":true, "typescript":true}),
+    }
+
+    let lang;
+    $: lang = $cur_tab_branch_class && class_to_lang[$cur_tab_branch_class]
+
     const ydoc = new Y.Doc()
     const ytext = ydoc.getText('ng')
 
@@ -52,6 +66,8 @@
         await cur_tab_deregister_on_save();
     })
 
+    let view;
+
     onMount(()=>{
 
         cur_tab_register_on_save(async (updates)=>{
@@ -76,7 +92,7 @@
   </script>
   <div class="flex-col">
     
-    <CodeMirror lang={javascript()} lineWrapping useTab={false} extensions={[basicSetup, yCollab(ytext, false, { undoManager: false })]} styles={{
+    <CodeMirror {lang} on:ready={(e) => { view = e.detail; view.focus(); }} lineWrapping extensions={[basicSetup, yCollab(ytext, false, { undoManager: false })]} styles={{
       "&": {
           maxWidth: "100%",
       },
diff --git a/ng-app/src/apps/ContainerView.svelte b/ng-app/src/apps/ContainerView.svelte
index 95981cd9..a25bcef4 100644
--- a/ng-app/src/apps/ContainerView.svelte
+++ b/ng-app/src/apps/ContainerView.svelte
@@ -15,7 +15,14 @@
     } from "../store";
     import { link } from "svelte-spa-router";
     import { Button, Progressbar, Spinner, Alert } from "flowbite-svelte";
-    
+    import{ PencilSquare } from "svelte-heros-v2";
+    import { t } from "svelte-i18n";
+    import { 
+      in_memory_discrete, open_viewer, set_viewer, set_editor, set_view_or_edit, cur_tab_branch_class, cur_tab_doc_can_edit
+    } from "../tab";
+    import {
+        openModalCreate
+    } from "../store";
     export let commits;
 
     function contained(graph) {
@@ -29,11 +36,27 @@
         }
         return ret;
     }
+
+    const create = () => {
+        openModalCreate();
+    }
   
   </script>
   <div class="flex-col p-5">
       {#each contained(commits.graph) as doc}
           <div class="flex font-mono mb-3"> <a use:link href="/{doc.nuri}">{doc.hash}</a> </div> 
       {/each}
-
+      {#if commits.graph.length == 0 || contained(commits.graph).length == 0} 
+        <p>{$t("doc.empty_container")}</p>
+        {#if $cur_tab_doc_can_edit}
+        <button
+            on:click={create}
+            on:keypress={create}
+            class="select-none ml-0 mt-2 mb-10 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-500/50 rounded-lg text-base p-2 text-center inline-flex items-center dark:focus:ring-primary-700/55"
+        >
+            <PencilSquare tabindex="-1" class="mr-2 focus:outline-none" />
+            {$t("doc.create")}
+        </button>
+    {/if}
+      {/if}
   </div>
\ No newline at end of file
diff --git a/ng-app/src/apps/PreTextViewer.svelte b/ng-app/src/apps/PreTextViewer.svelte
deleted file mode 100644
index e69de29b..00000000
diff --git a/ng-app/src/apps/SparqlQueryEditor.svelte b/ng-app/src/apps/SparqlQueryEditor.svelte
index f60f3ec5..eea765ad 100644
--- a/ng-app/src/apps/SparqlQueryEditor.svelte
+++ b/ng-app/src/apps/SparqlQueryEditor.svelte
@@ -55,6 +55,7 @@
         await reset_toasts();
         results = await sparql_query($in_memory_discrete, union);
       } catch(e) {
+        console.log(e)
         toast_error(display_error(e));
       }
     }
@@ -72,14 +73,14 @@
           maxWidth: "100%",
       },
     }}/>
-    <Toggle class="mt-1 ml-2" bind:checked={union}>Query all docs</Toggle>
+    <Toggle class="mt-1 ml-2" bind:checked={union}>{$t("doc.query_all_docs")}</Toggle>
     <button
       on:click={run}
       on:keypress={run}
       class="select-none ml-2 mt-2 mb-10 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-500/50 rounded-lg text-base p-2 text-center inline-flex items-center dark:focus:ring-primary-700/55"
     >
       <RocketLaunch tabindex="-1" class="mr-2 focus:outline-none" />
-      Run Query
+      {$t("doc.run_query")}
     </button>
     <button
       on:click={openTurtle}
@@ -87,18 +88,18 @@
       class="select-none ml-2 mt-2 mb-10 text-gray-600  focus:ring-4 focus:ring-primary-500/50 rounded-lg text-base p-2 text-center inline-flex items-center dark:focus:ring-primary-700/55"
     >
       <Sun class="mr-2 focus:outline-none" tabindex="-1" />
-      View as Turtle
+      {$t("doc.view_as_turtle")}
     </button>
     {#if results!==undefined}
       <div>
-        <span class="ml-2 font-bold">Results: <br/></span>
+        <span class="ml-2 font-bold">{$t("doc.results")}: <br/></span>
         {#if Array.isArray(results)}
           {#if results.length}
             <Highlight {language} code={results.join(" .\r\n") + (results.length ? " .":"")} class="mb-10"  let:highlighted >
               <LineNumbers {highlighted} wrapLines hideBorder />
             </Highlight>
           {:else}
-            Empty
+          <span class="ml-2">{$t("doc.empty")}</span>
           {/if}
         {:else if results?.head} 
           <Table>
diff --git a/ng-app/src/apps/SparqlUpdateEditor.svelte b/ng-app/src/apps/SparqlUpdateEditor.svelte
index fd6115fa..1cf2ae46 100644
--- a/ng-app/src/apps/SparqlUpdateEditor.svelte
+++ b/ng-app/src/apps/SparqlUpdateEditor.svelte
@@ -63,7 +63,7 @@
       class="select-none ml-2 mt-2 mb-10 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-500/50 rounded-lg text-base p-2 text-center inline-flex items-center dark:focus:ring-primary-700/55"
     >
       <RocketLaunch tabindex="-1" class="mr-2 focus:outline-none" />
-      Run Update
+      {$t("doc.run_update")}
     </button>
     <button
       on:click={openViewer}
@@ -71,7 +71,7 @@
       class="select-none ml-2 mt-2 mb-10 text-gray-600  focus:ring-4 focus:ring-primary-500/50 rounded-lg text-base p-2 text-center inline-flex items-center dark:focus:ring-primary-700/55"
     >
       <Sun class="mr-2 focus:outline-none" tabindex="-1" />
-      View Graph
+      {$t("doc.view_graph")}
     </button>
     
       
diff --git a/ng-app/src/apps/TextViewer.svelte b/ng-app/src/apps/TextViewer.svelte
new file mode 100644
index 00000000..4f1dacb1
--- /dev/null
+++ b/ng-app/src/apps/TextViewer.svelte
@@ -0,0 +1,101 @@
+<!--
+// Copyright (c) 2022-2024 Niko Bonnieure, Par le Peuple, NextGraph.org developers
+// All rights reserved.
+// Licensed under the Apache License, Version 2.0
+// <LICENSE-APACHE2 or http://www.apache.org/licenses/LICENSE-2.0>
+// or the MIT license <LICENSE-MIT or http://opensource.org/licenses/MIT>,
+// at your option. All files in the project carrying such
+// notice may not be copied, modified, or distributed except
+// according to those terms.
+-->
+
+<script lang="ts">
+    import { onMount, tick, onDestroy } from "svelte";
+    import { 
+      sparql_update,
+      toast_error,
+      toast_success
+    } from "../store";
+    import { 
+      in_memory_discrete, open_viewer, set_viewer, set_editor, set_view_or_edit, cur_tab_branch_class, cur_tab_doc_can_edit
+    } from "../tab";
+    import{ PencilSquare, RocketLaunch } from "svelte-heros-v2";
+    import { t } from "svelte-i18n";
+    import { Button, Progressbar, Spinner, Alert } from "flowbite-svelte";
+    
+    import * as Y from 'yjs'
+
+    import Highlight, { LineNumbers, HighlightSvelte } from "svelte-highlight";
+    import typescript from "svelte-highlight/languages/typescript";
+    import javascript from "svelte-highlight/languages/javascript";
+    import rust from "svelte-highlight/languages/rust";
+    import "svelte-highlight/styles/github.css";
+
+    const class_to_lang = {
+        "code:js" : javascript,
+        "code:ts" : typescript,
+        "code:rust" : rust,
+        "code:react" : javascript,
+    }
+
+    let language;
+    $: language = $cur_tab_branch_class && class_to_lang[$cur_tab_branch_class]
+    
+    export let commits = {};
+    let source = "";
+
+    const ydoc = new Y.Doc()
+    const ytext = ydoc.getText('ng')
+
+    ydoc.on('destroy', async () => {
+        commits.discrete?.deregisterOnUpdate();
+    })
+
+    onMount(()=>{
+        let history = commits.discrete?.registerOnUpdate((update) => {
+            Y.applyUpdate(ydoc, update.YText, {local:true})
+            source = ytext.toString()
+        });
+        for (const h of history) {
+            Y.applyUpdate(ydoc, h.YText, {local:true})
+        }
+        source = ytext.toString()
+    });
+
+    onDestroy(()=>{
+        ydoc.destroy();
+    });
+
+    const edit = () => {
+      set_view_or_edit(false);
+    }
+  
+  </script>
+  <div class="flex-col">
+    {#if source}
+      {#if $cur_tab_branch_class === "code:svelte"}
+        <HighlightSvelte code={source} class="mb-10" let:highlighted>
+            <LineNumbers {highlighted} wrapLines hideBorder />
+        </HighlightSvelte>
+      {:else if language}
+        <Highlight {language} code={source} class="mb-10" let:highlighted>
+            <LineNumbers {highlighted} wrapLines hideBorder />
+        </Highlight>
+      {:else}
+        <p class="font-mono whitespace-pre-wrap p-5">
+            {source}
+        </p>
+      {/if}
+    {:else if $cur_tab_doc_can_edit}
+        <button
+            on:click={edit}
+            on:keypress={edit}
+            class="select-none ml-5 mt-2 mb-10 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-500/50 rounded-lg text-base p-2 text-center inline-flex items-center dark:focus:ring-primary-700/55"
+        >
+            <PencilSquare tabindex="-1" class="mr-2 focus:outline-none" />
+            {$t("doc.start_editing")}            
+        </button>
+    {/if}
+      
+  </div>
+  
\ No newline at end of file
diff --git a/ng-app/src/apps/TurtleViewer.svelte b/ng-app/src/apps/TurtleViewer.svelte
index e8d07d76..e172e7cc 100644
--- a/ng-app/src/apps/TurtleViewer.svelte
+++ b/ng-app/src/apps/TurtleViewer.svelte
@@ -52,14 +52,16 @@
   
   </script>
   <div class="flex-col">
-    
+    {#if !source}
+    <p class="p-3">{$t("doc.no_triples")}</p>
+    {/if}
     <button
       on:click={openQuery}
       on:keypress={openQuery}
       class="select-none ml-2 mt-2 mb-2 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-500/50 rounded-lg text-base p-2 text-center inline-flex items-center dark:focus:ring-primary-700/55"
     >
       <RocketLaunch tabindex="-1" class="mr-2 focus:outline-none" />
-      SPARQL Query
+      {$t("doc.sparql_query")}
     </button>
     {#if $cur_tab_doc_can_edit}
       <button
@@ -68,7 +70,7 @@
         class="select-none ml-2 mt-2  text-gray-600  focus:ring-4 focus:ring-primary-500/50 rounded-lg text-base p-2 text-center inline-flex items-center dark:focus:ring-primary-700/55"
       >
         <PencilSquare class="mr-2 focus:outline-none" tabindex="-1" />
-        SPARQL Update
+        {$t("doc.sparql_update")}
       </button>
     {/if}
 
diff --git a/ng-app/src/classes.ts b/ng-app/src/classes.ts
index 1410a6e7..caf256b8 100644
--- a/ng-app/src/classes.ts
+++ b/ng-app/src/classes.ts
@@ -275,8 +275,8 @@ export const official_classes = {
         "ng:crdt": "Graph", // https://github.com/highlightjs/highlightjs-turtle/tree/master
         "ng:n": "Graph", 
         "ng:a": "Define the Graph of your data with Semantic Web / Linked Data",
-        "ng:o": "n:g:z:json_ld_viewer", // default viewer
-        "ng:w": "n:g:z:json_ld_editor", // default editor
+        //"ng:o": "n:g:z:json_ld_viewer", // default viewer
+        //"ng:w": "n:g:z:json_ld_editor", // default editor
         "ng:x": {
             "rdf":true,
             "xsd":true,
diff --git a/ng-app/src/lib/Document.svelte b/ng-app/src/lib/Document.svelte
index f51fecfb..59ed0ce9 100644
--- a/ng-app/src/lib/Document.svelte
+++ b/ng-app/src/lib/Document.svelte
@@ -68,7 +68,7 @@
                         class:"w-8 h-8 mr-2 mb-2 flex-none focus:outline-none"
                     }}/>
                     {/if}
-                    {#if !$header_title} <span class="font-mono h-8 py-1 inline-block align-middle mr-3"> {$cur_tab.doc.nuri.substring(2,9)} </span>  {/if}
+                    {#if !$header_title} <span class="font-mono h-8 py-1 inline-block align-middle mr-2"> {$cur_tab.doc.nuri.substring(2,9)} </span>  {/if}
                     {#if $cur_tab_doc_can_edit}
                     <button class="p-1 mr-2 mb-2 w-8 h-8 flex-none" on:click={openEditHeader} title={$t($edit_header_button)}>
                         <Pencil tabindex=-1 class="w-5 h-5 focus:outline-none" />
diff --git a/ng-app/src/locales/en.json b/ng-app/src/locales/en.json
index cd8f6afc..55d76506 100644
--- a/ng-app/src/locales/en.json
+++ b/ng-app/src/locales/en.json
@@ -36,13 +36,26 @@
       "dialog": "Send in Dialog",
       "store": "Save in current Store"
     },
+    "sparql_query": "SPARQL Query",
+    "run_query": "Run Query",
+    "run_update": "Run Update",
+    "query_all_docs": "Query all docs",
+    "view_as_turtle": "View as Turtle",
+    "view_graph": "View Graph",
+    "results": "Results",
+    "empty": "Empty",
+    "sparql_update": "SPARQL Update",
+    "no_triples": "No triples in this Graph.",
+    "start_editing": "Start editing",
+    "create": "Create a Document",
     "not_found" : "Document not found",
+    "empty_container": "Container is empty.",
     "not_found_details_online" : "The document could not be found locally on this device, nor on the broker.",
     "not_found_details_offline" : "The document could not be found locally on this device, and it seems like you are offline, so it could not be retrieved from any broker neither.<br/><br/>If you are opening this document for the first time on this device, you have to be online now so the document can be fetched.<br/><br/> We will try connecting and fetching it every 20 seconds.",
     "cannot_load_offline": "You are offline and using the web app. There is currently a limitation on local storage within the Web App, and you need to connect to the broker every time you login with the Web App.<br/><br/>For now, the Web App does not keep a local copy of your documents. due to the limit of 5MB in localStorage. We will remove this limitation soon. Stay tuned!<br/><br/>Check your connectivity status in the ",
     "header": {
       "buttons": {
-        "edit": "Edit title, icon, intro",
+        "edit": "Edit title & intro",
         "edit_profile": "Edit profile",
         "bookmarked": "Saved",
         "all_docs": "All Docs",
diff --git a/ng-app/src/store.ts b/ng-app/src/store.ts
index 8e352a21..03f5028e 100644
--- a/ng-app/src/store.ts
+++ b/ng-app/src/store.ts
@@ -46,6 +46,7 @@ init({
 
 export const display_error = (error: string) => {
     if (error.message) return error.message;
+    if (error.includes(" ")) return error;
     //console.log(error);
     // TODO: Check, if error tranlsation does not exist
     const parts = error.split(":");
diff --git a/ng-app/src/tab.ts b/ng-app/src/tab.ts
index 7e1bb01d..aa203048 100644
--- a/ng-app/src/tab.ts
+++ b/ng-app/src/tab.ts
@@ -99,7 +99,7 @@ const find_editors_for_class = (class_name: string) => {
     return found;
 }
 
-const find_source_viewer_for_class = (class_def) => {
+const find_source_viewer_for_class = (class_def, class_name) => {
     switch (class_def["ng:crdt"]) {
         case 'Graph':
             return "n:g:z:crdt_source_viewer:rdf";
@@ -111,6 +111,7 @@ const find_source_viewer_for_class = (class_def) => {
         case 'YXml':
             return "n:g:z:crdt_source_viewer:xml";
         case 'YText':
+            if (class_name === "post:text" || class_name.startsWith("code")) return false;
             return "n:g:z:crdt_source_viewer:text";
     }
 }
@@ -148,7 +149,8 @@ const class_to_viewers_editors = (class_name: string) => {
         for (const e of find_editors_for_class(class_name)) {
             if (e!==discrete_editor) discrete_editors.push(e);
         }
-        discrete_viewers.push(find_source_viewer_for_class(class_def));
+        let source_viewer = find_source_viewer_for_class(class_def, class_name);
+        if (source_viewer) discrete_viewers.push(source_viewer);
         if (!discrete_viewer) discrete_viewer = discrete_viewers[0];
     }
     return {
@@ -308,7 +310,6 @@ export let in_memory_save = [];
 let in_memory_save_callback = async (updates) => {};
 
 export const cur_tab_register_on_save = (f:(updates) => Promise<void>) => {
-    console.log("cur_tab_register_on_save")
     in_memory_save_callback = f;
     in_memory_save = [];
 }
@@ -373,6 +374,9 @@ export const cur_tab_toc_pane = derived(cur_tab, ($cur_tab) => {
 export const cur_tab_show_menu = derived(cur_tab, ($cur_tab) => {
     return $cur_tab.show_menu;
 });
+export const cur_tab_branch_class = derived(cur_tab, ($cur_tab) => {
+    return $cur_tab.branch.class;
+});
 export const cur_tab_branch_has_discrete = derived(cur_tab, ($cur_tab) => {
     return $cur_tab.branch.has_discrete;
 });
@@ -414,8 +418,8 @@ export const header_icon = derived(cur_tab, ($cur_tab) => {
     } else {
         let icon = $cur_tab.branch.icon || $cur_tab.doc.icon;
         if (icon) return icon;// TODO: fetch image and return blob:
-        let app = get_app($cur_tab.branch.class);
-        if (app) return "class:" + app["ng:n"];
+        let class_type = get_class($cur_tab.branch.class);
+        if (class_type) return "class:" + $cur_tab.branch.class;
     }
     return false;
 });
diff --git a/ng-app/src/zeras.ts b/ng-app/src/zeras.ts
index 609d15eb..bfef1f4b 100644
--- a/ng-app/src/zeras.ts
+++ b/ng-app/src/zeras.ts
@@ -58,16 +58,6 @@ export const official_apps = {
         "ng:b": "TripleEditor",
         "ng:w": ["data:graph"],
     },
-    "n:g:z:sparql_query": {
-        "ng:n": "SPARQL Query",
-        "ng:a": "View, edit and invoke a Graph SPARQL query",
-        "ng:c": "app", 
-        "ng:u": "sparql_query",//favicon. can be a did:ng:j 
-        "ng:g": "n:g:z:sparql_query",
-        "ng:b": "SparqlQueryEditor", // YASGUI of Zazuko https://github.com/zazuko/trifid/tree/main/packages/yasgui
-        "ng:o": ["data:graph"],
-        "ng:w": ["query:sparql"],
-    },
     "n:g:z:rdf_viewer:turtle": { // https://github.com/highlightjs/highlightjs-turtle/tree/master
         "ng:n": "Turtle",
         "ng:a": "View the RDF Graph in Turtle format",
@@ -78,6 +68,16 @@ export const official_apps = {
         "ng:o": ["data:graph"],
         "ng:w": [],
     },
+    "n:g:z:sparql_query": {
+        "ng:n": "SPARQL Query",
+        "ng:a": "View, edit and invoke a Graph SPARQL query",
+        "ng:c": "app", 
+        "ng:u": "sparql_query",//favicon. can be a did:ng:j 
+        "ng:g": "n:g:z:sparql_query",
+        "ng:b": "SparqlQueryEditor", // YASGUI of Zazuko https://github.com/zazuko/trifid/tree/main/packages/yasgui
+        "ng:o": ["data:graph"],
+        "ng:w": ["query:sparql"],
+    },
     "n:g:z:json_ld_viewer": {
         "ng:n": "JSON-LD",
         "ng:a": "View the RDF Graph as JSON-LD",
@@ -292,7 +292,7 @@ export const official_apps = {
         "ng:u": "source",//favicon. can be a did:ng:j 
         "ng:g": "n:g:z:crdt_source_viewer:text",
         "ng:b": "TextViewer", // displayed with highlight.js , with option to download
-        "ng:o": ["post:text", "post:asciidoc", "code*", "service*", "contract", "query:sparql*","query:graphql","doc:diagram:mermaid","doc:diagram:graphviz","doc:diagram:flowchart",
+        "ng:o": ["post:asciidoc", "service*", "contract", "query:sparql*","query:graphql","doc:diagram:mermaid","doc:diagram:graphviz","doc:diagram:flowchart",
                 "doc:diagram:sequence","doc:diagram:markmap","doc:diagram:mymind","doc:music*", "doc:maths", "doc:chemistry", "doc:ancientscript", "doc:braille", "media:subtitle"],
         "ng:w": [],
     },
@@ -350,7 +350,7 @@ export const official_apps = {
         "ng:c": "app", 
         "ng:u": "post",//favicon. can be a did:ng:j 
         "ng:g": "n:g:z:post:text", 
-        "ng:b": "TextViewer", // displayed with a <p>
+        "ng:b": "TextViewer",
         "ng:o": ["post:text"],
         "ng:w": [],
     },
@@ -360,8 +360,8 @@ export const official_apps = {
         "ng:c": "app", 
         "ng:u": "post",//favicon. can be a did:ng:j 
         "ng:g": "n:g:z:pre", 
-        "ng:b": "PreTextViewer", // displayed with highlight.js 
-        "ng:o": ["code*","post:text"],
+        "ng:b": "TextViewer", // displayed with highlight.js 
+        "ng:o": ["code*"],
         "ng:w": [],
     },
     "n:g:z:pad": {
@@ -575,7 +575,7 @@ export const official_services = {
         "ng:w": ["data:graph"],
     },
     "n:g:z:dump_file": {
-        "ng:n": "Export file",
+        "ng:n": "Export File",
         "ng:a": "Get the binary content of a file",
         "ng:c": "service",
         "ng:u": "dump",// favicon. can be a did:ng:j 
@@ -584,7 +584,7 @@ export const official_services = {
         "ng:result": ["file:iana:*"],
     },
     "n:g:z:dump_json": {
-        "ng:n": "JSON export",
+        "ng:n": "Export JSON",
         "ng:a": "Export JSON content of document",
         "ng:c": "service",
         "ng:u": "data",// favicon. can be a did:ng:j 
@@ -594,7 +594,7 @@ export const official_services = {
         "ng:result": ["file:iana:application:json"],
     },
     "n:g:z:dump_xml": {
-        "ng:n": "XML export",
+        "ng:n": "Export XML",
         "ng:a": "Export XML content of document",
         "ng:c": "service",
         "ng:u": "data",// favicon. can be a did:ng:j 
@@ -604,7 +604,7 @@ export const official_services = {
         "ng:result": ["file:iana:text:xml"],
     },
     "n:g:z:dump_text": {
-        "ng:n": "Text export",
+        "ng:n": "Export Text",
         "ng:a": "Export plain-text content of document",
         "ng:c": "service",
         "ng:u": "dump",// favicon. can be a did:ng:j 
@@ -644,12 +644,12 @@ export const official_services = {
     },
     "n:g:z:load_text": {
         "ng:n": "Import Text",
-        "ng:a": "Import some text into the document",
+        "ng:a": "Import plain text into the document",
         "ng:c": "service",
         "ng:u": "load",// favicon. can be a did:ng:j 
         "ng:g": "n:g:z:load_text",
         "ng:o": [],
-        "ng:w": ["post:text","post:rich","post:md"],
+        "ng:w": ["post:text","post:rich","post:md","code*"],
     },
     "n:g:z:load_md": {
         "ng:n": "Import Markdown",
diff --git a/ng-app/vite.config.ts b/ng-app/vite.config.ts
index a3930d98..c7ff6657 100644
--- a/ng-app/vite.config.ts
+++ b/ng-app/vite.config.ts
@@ -12,7 +12,8 @@ export default defineConfig(async () => {
   const host = await internalIpV4()
   const config = {
   optimizeDeps: {
-    exclude: ["codemirror", "@codemirror/*", "@codemirror/language", "@codemirror/state", "@codemirror/view","@codemirror/legacy-modes/mode/sparql"]
+    exclude: ["codemirror", "@codemirror/*", "@codemirror/language", "@codemirror/state", "@codemirror/view","@codemirror/legacy-modes/mode/sparql",
+    "@codemirror/lang-javascript", "@codemirror/lang-rust", "@replit/codemirror-lang-svelte", "yjs", "y-codemirror.next", "svelte-codemirror-editor"],
   },
   worker: {
     format: 'es',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6a2b467d..e6abaf78 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -33,14 +33,22 @@ importers:
     specifiers:
       '@codemirror/autocomplete': ^6.17.0
       '@codemirror/commands': ^6.6.0
+      '@codemirror/lang-css': ^6.0.1
+      '@codemirror/lang-html': ^6.2.0
       '@codemirror/lang-javascript': ^6.2.2
+      '@codemirror/lang-rust': ^6.0.1
       '@codemirror/language': ^6.10.2
       '@codemirror/legacy-modes': ^6.4.0
       '@codemirror/lint': ^6.8.1
       '@codemirror/search': ^6.5.6
       '@codemirror/state': ^6.4.1
       '@codemirror/view': ^6.29.1
+      '@lezer/common': ^1.0.0
+      '@lezer/highlight': ^1.0.0
+      '@lezer/javascript': ^1.2.0
+      '@lezer/lr': ^1.0.0
       '@popperjs/core': ^2.11.8
+      '@replit/codemirror-lang-svelte': ^6.0.0
       '@sveltejs/vite-plugin-svelte': ^2.0.0
       '@tauri-apps/api': 2.0.0-alpha.8
       '@tauri-apps/cli': 2.0.0-alpha.14
@@ -85,22 +93,30 @@ importers:
       y-codemirror.next: ^0.3.5
       yjs: ^13.6.18
     dependencies:
-      '@codemirror/autocomplete': 6.17.0_77urojsfbrmvdrcps23icldzhi
+      '@codemirror/autocomplete': 6.17.0_y4udqqf6vpekb2i4jypui2pd5e
       '@codemirror/commands': 6.6.0
+      '@codemirror/lang-css': 6.2.1_@codemirror+view@6.29.1
+      '@codemirror/lang-html': 6.4.9
       '@codemirror/lang-javascript': 6.2.2
+      '@codemirror/lang-rust': 6.0.1
       '@codemirror/language': 6.10.2
       '@codemirror/legacy-modes': 6.4.0
       '@codemirror/lint': 6.8.1
       '@codemirror/search': 6.5.6
       '@codemirror/state': 6.4.1
       '@codemirror/view': 6.29.1
+      '@lezer/common': 1.2.1
+      '@lezer/highlight': 1.2.0
+      '@lezer/javascript': 1.4.17
+      '@lezer/lr': 1.4.1
       '@popperjs/core': 2.11.8
+      '@replit/codemirror-lang-svelte': 6.0.0_lm5kufzbvgjiwtncg4ikhuo3ce
       '@tauri-apps/api': 2.0.0-alpha.8
       '@tauri-apps/plugin-barcode-scanner': 2.0.0-alpha.0
       '@tauri-apps/plugin-window': 2.0.0-alpha.1
       async-proxy: 0.4.1
       classnames: 2.3.2
-      codemirror: 6.0.1
+      codemirror: 6.0.1_@lezer+common@1.2.1
       flowbite: 1.6.5
       flowbite-svelte: 0.43.3_svelte@3.59.1
       html5-qrcode: 2.3.8
@@ -192,6 +208,20 @@ packages:
       '@lezer/common': 1.2.1
     dev: false
 
+  /@codemirror/autocomplete/6.17.0_y4udqqf6vpekb2i4jypui2pd5e:
+    resolution: {integrity: sha512-fdfj6e6ZxZf8yrkMHUSJJir7OJkHkZKaOZGzLWIYp2PZ3jd+d+UjG8zVPqJF6d3bKxkhvXTPan/UZ1t7Bqm0gA==}
+    peerDependencies:
+      '@codemirror/language': ^6.0.0
+      '@codemirror/state': ^6.0.0
+      '@codemirror/view': ^6.0.0
+      '@lezer/common': ^1.0.0
+    dependencies:
+      '@codemirror/language': 6.10.2
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.29.1
+      '@lezer/common': 1.2.1
+    dev: false
+
   /@codemirror/commands/6.6.0:
     resolution: {integrity: sha512-qnY+b7j1UNcTS31Eenuc/5YJB6gQOzkUoNmJQc0rznwqSRpeaWWpjkWy2C/MPTcePpsKJEM26hXrOXl1+nceXg==}
     dependencies:
@@ -201,10 +231,36 @@ packages:
       '@lezer/common': 1.2.1
     dev: false
 
+  /@codemirror/lang-css/6.2.1_@codemirror+view@6.29.1:
+    resolution: {integrity: sha512-/UNWDNV5Viwi/1lpr/dIXJNWiwDxpw13I4pTUAsNxZdg6E0mI2kTQb0P2iHczg1Tu+H4EBgJR+hYhKiHKko7qg==}
+    dependencies:
+      '@codemirror/autocomplete': 6.17.0_y4udqqf6vpekb2i4jypui2pd5e
+      '@codemirror/language': 6.10.2
+      '@codemirror/state': 6.4.1
+      '@lezer/common': 1.2.1
+      '@lezer/css': 1.1.8
+    transitivePeerDependencies:
+      - '@codemirror/view'
+    dev: false
+
+  /@codemirror/lang-html/6.4.9:
+    resolution: {integrity: sha512-aQv37pIMSlueybId/2PVSP6NPnmurFDVmZwzc7jszd2KAF8qd4VBbvNYPXWQq90WIARjsdVkPbw29pszmHws3Q==}
+    dependencies:
+      '@codemirror/autocomplete': 6.17.0_y4udqqf6vpekb2i4jypui2pd5e
+      '@codemirror/lang-css': 6.2.1_@codemirror+view@6.29.1
+      '@codemirror/lang-javascript': 6.2.2
+      '@codemirror/language': 6.10.2
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.29.1
+      '@lezer/common': 1.2.1
+      '@lezer/css': 1.1.8
+      '@lezer/html': 1.3.10
+    dev: false
+
   /@codemirror/lang-javascript/6.2.2:
     resolution: {integrity: sha512-VGQfY+FCc285AhWuwjYxQyUQcYurWlxdKYT4bqwr3Twnd5wP5WSeu52t4tvvuWmljT4EmgEgZCqSieokhtY8hg==}
     dependencies:
-      '@codemirror/autocomplete': 6.17.0_77urojsfbrmvdrcps23icldzhi
+      '@codemirror/autocomplete': 6.17.0_y4udqqf6vpekb2i4jypui2pd5e
       '@codemirror/language': 6.10.2
       '@codemirror/lint': 6.8.1
       '@codemirror/state': 6.4.1
@@ -213,6 +269,13 @@ packages:
       '@lezer/javascript': 1.4.17
     dev: false
 
+  /@codemirror/lang-rust/6.0.1:
+    resolution: {integrity: sha512-344EMWFBzWArHWdZn/NcgkwMvZIWUR1GEBdwG8FEp++6o6vT6KL9V7vGs2ONsKxxFUPXKI0SPcWhyYyl2zPYxQ==}
+    dependencies:
+      '@codemirror/language': 6.10.2
+      '@lezer/rust': 1.0.2
+    dev: false
+
   /@codemirror/language/6.10.2:
     resolution: {integrity: sha512-kgbTYTo0Au6dCSc/TFy7fK3fpJmgHDv1sG1KNQKJXVi+xBTEeBPY/M30YXiU6mMXeH+YIDLsbrT4ZwNRdtF+SA==}
     dependencies:
@@ -730,12 +793,28 @@ packages:
     resolution: {integrity: sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==}
     dev: false
 
+  /@lezer/css/1.1.8:
+    resolution: {integrity: sha512-7JhxupKuMBaWQKjQoLtzhGj83DdnZY9MckEOG5+/iLKNK2ZJqKc6hf6uc0HjwCX7Qlok44jBNqZhHKDhEhZYLA==}
+    dependencies:
+      '@lezer/common': 1.2.1
+      '@lezer/highlight': 1.2.0
+      '@lezer/lr': 1.4.1
+    dev: false
+
   /@lezer/highlight/1.2.0:
     resolution: {integrity: sha512-WrS5Mw51sGrpqjlh3d4/fOwpEV2Hd3YOkp9DBt4k8XZQcoTHZFB7sx030A6OcahF4J1nDQAa3jXlTVVYH50IFA==}
     dependencies:
       '@lezer/common': 1.2.1
     dev: false
 
+  /@lezer/html/1.3.10:
+    resolution: {integrity: sha512-dqpT8nISx/p9Do3AchvYGV3qYc4/rKr3IBZxlHmpIKam56P47RSHkSF5f13Vu9hebS1jM0HmtJIwLbWz1VIY6w==}
+    dependencies:
+      '@lezer/common': 1.2.1
+      '@lezer/highlight': 1.2.0
+      '@lezer/lr': 1.4.1
+    dev: false
+
   /@lezer/javascript/1.4.17:
     resolution: {integrity: sha512-bYW4ctpyGK+JMumDApeUzuIezX01H76R1foD6LcRX224FWfyYit/HYxiPGDjXXe/wQWASjCvVGoukTH68+0HIA==}
     dependencies:
@@ -750,6 +829,14 @@ packages:
       '@lezer/common': 1.2.1
     dev: false
 
+  /@lezer/rust/1.0.2:
+    resolution: {integrity: sha512-Lz5sIPBdF2FUXcWeCu1//ojFAZqzTQNRga0aYv6dYXqJqPfMdCAI0NzajWUd4Xijj1IKJLtjoXRPMvTKWBcqKg==}
+    dependencies:
+      '@lezer/common': 1.2.1
+      '@lezer/highlight': 1.2.0
+      '@lezer/lr': 1.4.1
+    dev: false
+
   /@nodelib/fs.scandir/2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -775,6 +862,34 @@ packages:
     resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
     dev: false
 
+  /@replit/codemirror-lang-svelte/6.0.0_lm5kufzbvgjiwtncg4ikhuo3ce:
+    resolution: {integrity: sha512-U2OqqgMM6jKelL0GNWbAmqlu1S078zZNoBqlJBW+retTc5M4Mha6/Y2cf4SVg6ddgloJvmcSpt4hHrVoM4ePRA==}
+    peerDependencies:
+      '@codemirror/autocomplete': ^6.0.0
+      '@codemirror/lang-css': ^6.0.1
+      '@codemirror/lang-html': ^6.2.0
+      '@codemirror/lang-javascript': ^6.1.1
+      '@codemirror/language': ^6.0.0
+      '@codemirror/state': ^6.0.0
+      '@codemirror/view': ^6.0.0
+      '@lezer/common': ^1.0.0
+      '@lezer/highlight': ^1.0.0
+      '@lezer/javascript': ^1.2.0
+      '@lezer/lr': ^1.0.0
+    dependencies:
+      '@codemirror/autocomplete': 6.17.0_y4udqqf6vpekb2i4jypui2pd5e
+      '@codemirror/lang-css': 6.2.1_@codemirror+view@6.29.1
+      '@codemirror/lang-html': 6.4.9
+      '@codemirror/lang-javascript': 6.2.2
+      '@codemirror/language': 6.10.2
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.29.1
+      '@lezer/common': 1.2.1
+      '@lezer/highlight': 1.2.0
+      '@lezer/javascript': 1.4.17
+      '@lezer/lr': 1.4.1
+    dev: false
+
   /@rollup/plugin-virtual/3.0.1:
     resolution: {integrity: sha512-fK8O0IL5+q+GrsMLuACVNk2x21g3yaw+sG2qn16SnUd3IlBsQyvWxLMGHmCmXRMecPjGRSZ/1LmZB4rjQm68og==}
     engines: {node: '>=14.0.0'}
@@ -1214,6 +1329,20 @@ packages:
       '@codemirror/view': 6.29.1
     dev: false
 
+  /codemirror/6.0.1_@lezer+common@1.2.1:
+    resolution: {integrity: sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==}
+    dependencies:
+      '@codemirror/autocomplete': 6.17.0_y4udqqf6vpekb2i4jypui2pd5e
+      '@codemirror/commands': 6.6.0
+      '@codemirror/language': 6.10.2
+      '@codemirror/lint': 6.8.1
+      '@codemirror/search': 6.5.6
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.29.1
+    transitivePeerDependencies:
+      - '@lezer/common'
+    dev: false
+
   /commander/4.1.1:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
@@ -2329,7 +2458,7 @@ packages:
       codemirror: ^6.0.0
       svelte: ^3.0.0 || ^4.0.0
     dependencies:
-      codemirror: 6.0.1
+      codemirror: 6.0.1_@lezer+common@1.2.1
       svelte: 3.59.1
     dev: false