diff --git a/python/jupytercad_app/package.json b/python/jupytercad_app/package.json
index 7aed8849..cee642fa 100644
--- a/python/jupytercad_app/package.json
+++ b/python/jupytercad_app/package.json
@@ -75,6 +75,7 @@
     "@jupyterlab/filebrowser": "^4.0.0",
     "@jupyterlab/filebrowser-extension": "^4.0.0",
     "@jupyterlab/fileeditor": "^4.2.0",
+    "@jupyterlab/json-extension": "^4.0.0",
     "@jupyterlab/launcher": "^4.0.0",
     "@jupyterlab/launcher-extension": "^4.0.0",
     "@jupyterlab/logconsole": "^4.0.0",
diff --git a/python/jupytercad_app/src/app/app.ts b/python/jupytercad_app/src/app/app.ts
index 691df340..b06b34ba 100644
--- a/python/jupytercad_app/src/app/app.ts
+++ b/python/jupytercad_app/src/app/app.ts
@@ -1,4 +1,5 @@
 import {
+  createRendermimePlugins,
   JupyterFrontEnd,
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
@@ -6,6 +7,7 @@ import {
 import { PageConfig } from '@jupyterlab/coreutils';
 
 import { IShell, Shell } from './shell';
+import { IRenderMime } from '@jupyterlab/rendermime';
 
 /**
  * App is the main application class. It is instantiated once and shared.
@@ -16,10 +18,16 @@ export class App extends JupyterFrontEnd<IShell> {
    *
    * @param options The instantiation options for an application.
    */
-  constructor(options: App.IOptions = { shell: new Shell() }) {
+  constructor(options: App.IOptions) {
     super({
-      shell: options.shell
+      ...options,
+      shell: options.shell ?? new Shell()
     });
+    if (options.mimeExtensions) {
+      for (const plugin of createRendermimePlugins(options.mimeExtensions)) {
+        this.registerPlugin(plugin);
+      }
+    }
   }
 
   /**
@@ -112,7 +120,21 @@ export namespace App {
   /**
    * The instantiation options for an App application.
    */
-  export type IOptions = JupyterFrontEnd.IOptions<IShell>;
+  export interface IOptions
+    extends JupyterFrontEnd.IOptions<IShell>,
+      Partial<IInfo> {
+    paths?: Partial<JupyterFrontEnd.IPaths>;
+  }
+
+  /**
+   * The information about a application.
+   */
+  export interface IInfo {
+    /**
+     * The mime renderer extensions.
+     */
+    readonly mimeExtensions: IRenderMime.IExtensionModule[];
+  }
 
   /**
    * The interface for a module that exports a plugin or plugins as
diff --git a/python/jupytercad_app/src/main.ts b/python/jupytercad_app/src/main.ts
index 0f06847e..70e88489 100644
--- a/python/jupytercad_app/src/main.ts
+++ b/python/jupytercad_app/src/main.ts
@@ -15,6 +15,7 @@ import '@jupyterlab/console/style/index.js';
 import '@jupyterlab/completer/style/index.js';
 import '../style/index.css';
 import './sharedscope';
+import { Shell } from './app/shell';
 
 function loadScript(url: string) {
   return new Promise((resolve, reject) => {
@@ -61,7 +62,6 @@ async function createModule(scope: string, module: string) {
 async function main(): Promise<void> {
   // Inject some packages in the shared scope
 
-  const app = new App();
   // populate the list of disabled extensions
   const disabled: any[] = [
     'jupytercad:serverInfoPlugin',
@@ -142,8 +142,12 @@ async function main(): Promise<void> {
     require('./app/plugins/browser'),
     require('./app/plugins/launcher')
   ];
+  const mimeExtensions = [
+    require('@jupyterlab/json-extension'),
+  ];
 
   const federatedExtensionPromises: Promise<any>[] = [];
+  const federatedMimeExtensionPromises: Promise<any>[] = [];
   const federatedStylePromises: Promise<any>[] = [];
 
   const extension_data = JSON.parse(
@@ -176,8 +180,9 @@ async function main(): Promise<void> {
       federatedExtensionPromises.push(createModule(data.name, data.extension));
     }
     if (data.mimeExtension) {
-      // TODO Do we need mime extensions?
-      return;
+      federatedMimeExtensionPromises.push(
+        createModule(data.name, data.mimeExtension)
+      );
     }
     if (data.style && !PageConfig.Extension.isDisabled(data.name)) {
       federatedStylePromises.push(createModule(data.name, data.style));
@@ -200,6 +205,20 @@ async function main(): Promise<void> {
     }
   });
 
+  // Add the federated mime extensions.
+  const federatedMimeExtensions = await Promise.allSettled(
+    federatedMimeExtensionPromises
+  );
+  federatedMimeExtensions.forEach((p) => {
+    if (p.status === 'fulfilled') {
+      for (const plugin of activePlugins(p.value)) {
+        mimeExtensions.push(plugin);
+      }
+    } else {
+      console.error(p.reason);
+    }
+  });
+
   // Load all federated component styles and log errors for any that do not
   (await Promise.allSettled(federatedStylePromises))
     .filter(({ status }) => status === 'rejected')
@@ -207,6 +226,7 @@ async function main(): Promise<void> {
       console.error((e as any).reason);
     });
 
+  const app = new App({ mimeExtensions, shell: new Shell() });
   app.registerPluginModules(mods);
 
   await app.start();
diff --git a/yarn.lock b/yarn.lock
index 06812364..e9c62bfd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -134,6 +134,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.16.7, @babel/runtime@npm:^7.20.6":
+  version: 7.25.9
+  resolution: "@babel/runtime@npm:7.25.9"
+  dependencies:
+    regenerator-runtime: ^0.14.0
+  checksum: ce1c87b166ff728eaee91658a67fb7835314ed157b7a36d49602ffdaaa37fb1fcf2784afd00b55fe1672bec53fb38cba622a056c913611af2a44503097216229
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.25.7":
   version: 7.25.7
   resolution: "@babel/template@npm:7.25.7"
@@ -939,6 +948,7 @@ __metadata:
     "@jupyterlab/filebrowser": ^4.0.0
     "@jupyterlab/filebrowser-extension": ^4.0.0
     "@jupyterlab/fileeditor": ^4.2.0
+    "@jupyterlab/json-extension": ^4.0.0
     "@jupyterlab/launcher": ^4.0.0
     "@jupyterlab/launcher-extension": ^4.0.0
     "@jupyterlab/logconsole": ^4.0.0
@@ -1766,6 +1776,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jupyterlab/json-extension@npm:^4.0.0":
+  version: 4.2.5
+  resolution: "@jupyterlab/json-extension@npm:4.2.5"
+  dependencies:
+    "@jupyterlab/apputils": ^4.3.5
+    "@jupyterlab/codemirror": ^4.2.5
+    "@jupyterlab/rendermime-interfaces": ^3.10.5
+    "@jupyterlab/translation": ^4.2.5
+    "@jupyterlab/ui-components": ^4.2.5
+    "@lezer/highlight": ^1.2.0
+    "@lumino/coreutils": ^2.1.2
+    "@lumino/messaging": ^2.0.1
+    "@lumino/widgets": ^2.3.2
+    react: ^18.2.0
+    react-dom: ^18.2.0
+    react-highlight-words: ^0.20.0
+    react-json-tree: ^0.18.0
+    style-mod: ^4.0.0
+  checksum: d6fef0834529c6e08e90742d12961e6ab53e63f88c620088d80b9d30c522bc2d02d9d58f9017f162cdd1ce33d1411456af9475599139b6857778a2e3e221e74a
+  languageName: node
+  linkType: hard
+
 "@jupyterlab/launcher-extension@npm:^4.0.0":
   version: 4.2.5
   resolution: "@jupyterlab/launcher-extension@npm:4.2.5"
@@ -3565,6 +3597,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/base16@npm:^1.0.2":
+  version: 1.0.5
+  resolution: "@types/base16@npm:1.0.5"
+  checksum: caa391944e9af95d395ad8a489ad7e6bc3b358f73f876215313e8a2f97a18d109d8ab3d6d92bd473d9a1c782639a82921a3c30124922f2492082b550a2e9f6a6
+  languageName: node
+  linkType: hard
+
 "@types/create-react-class@npm:*":
   version: 15.6.8
   resolution: "@types/create-react-class@npm:15.6.8"
@@ -3613,7 +3652,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/lodash@npm:^4.14.168":
+"@types/lodash@npm:^4.14.168, @types/lodash@npm:^4.14.178, @types/lodash@npm:^4.14.191":
   version: 4.17.12
   resolution: "@types/lodash@npm:4.17.12"
   checksum: 7b564e4114f09ce5ae31a2e9493592baf20bb498507f3705c5d91cf838c2298b4f6a06f2d6c8dc608fcac63e210a2b7b13388c7a5e220e15688f813521030127
@@ -4542,6 +4581,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"base16@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "base16@npm:1.0.0"
+  checksum: 0cd449a2db0f0f957e4b6b57e33bc43c9e20d4f1dd744065db94b5da35e8e71fa4dc4bc7a901e59a84d5f8b6936e3c520e2471787f667fc155fb0f50d8540f5d
+  languageName: node
+  linkType: hard
+
 "base64-js@npm:^1.3.1":
   version: 1.5.1
   resolution: "base64-js@npm:1.5.1"
@@ -4984,7 +5030,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"color-convert@npm:^1.9.0":
+"color-convert@npm:^1.9.0, color-convert@npm:^1.9.3":
   version: 1.9.3
   resolution: "color-convert@npm:1.9.3"
   dependencies:
@@ -5009,13 +5055,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"color-name@npm:~1.1.4":
+"color-name@npm:^1.0.0, color-name@npm:~1.1.4":
   version: 1.1.4
   resolution: "color-name@npm:1.1.4"
   checksum: b0445859521eb4021cd0fb0cc1a75cecf67fceecae89b63f62b201cca8d345baf8b952c966862a9d9a2632987d4f6581f0ec8d957dfacece86f0a7919316f610
   languageName: node
   linkType: hard
 
+"color-string@npm:^1.6.0":
+  version: 1.9.1
+  resolution: "color-string@npm:1.9.1"
+  dependencies:
+    color-name: ^1.0.0
+    simple-swizzle: ^0.2.2
+  checksum: c13fe7cff7885f603f49105827d621ce87f4571d78ba28ef4a3f1a104304748f620615e6bf065ecd2145d0d9dad83a3553f52bb25ede7239d18e9f81622f1cc5
+  languageName: node
+  linkType: hard
+
 "color-support@npm:^1.1.3":
   version: 1.1.3
   resolution: "color-support@npm:1.1.3"
@@ -5025,6 +5081,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"color@npm:^3.2.1":
+  version: 3.2.1
+  resolution: "color@npm:3.2.1"
+  dependencies:
+    color-convert: ^1.9.3
+    color-string: ^1.6.0
+  checksum: f81220e8b774d35865c2561be921f5652117638dcda7ca4029262046e37fc2444ac7bbfdd110cf1fd9c074a4ee5eda8f85944ffbdda26186b602dd9bb05f6400
+  languageName: node
+  linkType: hard
+
 "colord@npm:^2.9.3":
   version: 2.9.3
   resolution: "colord@npm:2.9.3"
@@ -5402,7 +5468,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csstype@npm:^3.0.2":
+"csstype@npm:^3.0.10, csstype@npm:^3.0.2":
   version: 3.1.3
   resolution: "csstype@npm:3.1.3"
   checksum: 8db785cc92d259102725b3c694ec0c823f5619a84741b5c7991b8ad135dfaa66093038a1cc63e03361a6cd28d122be48f2106ae72334e067dd619a51f49eddf7
@@ -7174,6 +7240,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"highlight-words-core@npm:^1.2.0":
+  version: 1.2.3
+  resolution: "highlight-words-core@npm:1.2.3"
+  checksum: 1cd522406c5875ba2fdd82d47c1211f5db8df0f78166d2a5d3b6cfb77797e636428d8d79993c77827825cc6d35bbc3252d390e7efaaff5b28b3e5022ee16fd2c
+  languageName: node
+  linkType: hard
+
 "hoist-non-react-statics@npm:^3.0.0":
   version: 3.3.2
   resolution: "hoist-non-react-statics@npm:3.3.2"
@@ -7552,6 +7625,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-arrayish@npm:^0.3.1":
+  version: 0.3.2
+  resolution: "is-arrayish@npm:0.3.2"
+  checksum: 977e64f54d91c8f169b59afcd80ff19227e9f5c791fa28fa2e5bce355cbaf6c2c356711b734656e80c9dd4a854dd7efcf7894402f1031dfc5de5d620775b4d5f
+  languageName: node
+  linkType: hard
+
 "is-bigint@npm:^1.0.1":
   version: 1.0.4
   resolution: "is-bigint@npm:1.0.4"
@@ -8535,6 +8615,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash.curry@npm:^4.1.1":
+  version: 4.1.1
+  resolution: "lodash.curry@npm:4.1.1"
+  checksum: 9192b70fe7df4d1ff780c0260bee271afa9168c93fe4fa24bc861900240531b59781b5fdaadf4644fea8f4fbcd96f0700539ab294b579ffc1022c6c15dcc462a
+  languageName: node
+  linkType: hard
+
 "lodash.debounce@npm:^4.0.8":
   version: 4.0.8
   resolution: "lodash.debounce@npm:4.0.8"
@@ -8783,6 +8870,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"memoize-one@npm:^4.0.0":
+  version: 4.0.3
+  resolution: "memoize-one@npm:4.0.3"
+  checksum: addd18c046542f57440ba70bf8ebd48663d17626cade681f777522ef70900a87ec72c5041bed8ece4f6d40a2cb58803bae388b50a4b740d64f36bcda20c147b7
+  languageName: node
+  linkType: hard
+
 "memoizee@npm:^0.4.15":
   version: 0.4.17
   resolution: "memoizee@npm:0.4.17"
@@ -10392,7 +10486,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.6.1, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
+"prop-types@npm:^15.5.8, prop-types@npm:^15.6.1, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -10479,6 +10573,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-base16-styling@npm:^0.9.1":
+  version: 0.9.1
+  resolution: "react-base16-styling@npm:0.9.1"
+  dependencies:
+    "@babel/runtime": ^7.16.7
+    "@types/base16": ^1.0.2
+    "@types/lodash": ^4.14.178
+    base16: ^1.0.0
+    color: ^3.2.1
+    csstype: ^3.0.10
+    lodash.curry: ^4.1.1
+  checksum: 1e61e1158ee5250ad68860840368f9228685680df15385c0fc4d5c63dd0925f27f4f1d1762134de623fe005e75ef9543191aa648cde2c16d0153341d00ceeecb
+  languageName: node
+  linkType: hard
+
 "react-codemirror2@npm:^7.2.1":
   version: 7.3.0
   resolution: "react-codemirror2@npm:7.3.0"
@@ -10527,6 +10636,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-highlight-words@npm:^0.20.0":
+  version: 0.20.0
+  resolution: "react-highlight-words@npm:0.20.0"
+  dependencies:
+    highlight-words-core: ^1.2.0
+    memoize-one: ^4.0.0
+    prop-types: ^15.5.8
+  peerDependencies:
+    react: ^0.14.0 || ^15.0.0 || ^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0
+  checksum: 6794b6fe409ee81390e342ccdb951696e06354d8591b4cac050a6d64dbc77dfc7bb636fee0aabcfda841e57778aa5108fe351e7c1dc27b28abedd36aec8141e7
+  languageName: node
+  linkType: hard
+
 "react-is@npm:16.9.0":
   version: 16.9.0
   resolution: "react-is@npm:16.9.0"
@@ -10548,6 +10670,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-json-tree@npm:^0.18.0":
+  version: 0.18.0
+  resolution: "react-json-tree@npm:0.18.0"
+  dependencies:
+    "@babel/runtime": ^7.20.6
+    "@types/lodash": ^4.14.191
+    react-base16-styling: ^0.9.1
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: e59244b1f7866a3fec7b5fe83d68833583568e9ae217c261b09077de196a51cc96642e8b1d6826d963aaf910a496e1cf432240ee142ce7efa965345915bb57ac
+  languageName: node
+  linkType: hard
+
 "react-lifecycles-compat@npm:^3.0.4":
   version: 3.0.4
   resolution: "react-lifecycles-compat@npm:3.0.4"
@@ -11266,6 +11402,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"simple-swizzle@npm:^0.2.2":
+  version: 0.2.2
+  resolution: "simple-swizzle@npm:0.2.2"
+  dependencies:
+    is-arrayish: ^0.3.1
+  checksum: a7f3f2ab5c76c4472d5c578df892e857323e452d9f392e1b5cf74b74db66e6294a1e1b8b390b519fa1b96b5b613f2a37db6cffef52c3f1f8f3c5ea64eb2d54c0
+  languageName: node
+  linkType: hard
+
 "slash@npm:3.0.0, slash@npm:^3.0.0":
   version: 3.0.0
   resolution: "slash@npm:3.0.0"