Building a Light weight code editor

A simple code editor that can be used in any AstroJS project.

Integrating an inline JS editor into your AstroJS site

Astro JS, the modern static site generator, continues to capture the interest of developers with its powerful capabilities and ease of use. One of the most requested features is the ability to include an inline code editor directly within your Astro JS projects. This post will walk you through the process of adding this to your project


    // wow this should work
    const canvas = document.getElementById("renderCanvas");
    const engine = new BABYLON.Engine(canvas, true);
    const scene = new BABYLON.Scene(engine);
    const camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, BABYLON.Vector3.Zero(), scene);
    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0), scene);
    const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 1 }, scene);
    engine.runRenderLoop(() => scene.render());
    window.addEventListener("resize", () => engine.resize());

Run

Copy

Run Fullscreen

Installation

Grab the source of the component from the GIST

Include the supporting Shoelace components (this can be in your layout or directly added to the CodeEditor.astro file)

    
 <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.15.1/cdn/shoelace-autoloader.js">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.15.1/cdn/themes/dark.css" />

Usage based on the example above

Conclusion

Building an inline code editor for your Astro JS projects can greatly enhance the interactivity and usability of your web applications. By leveraging the power of CodeMirror and the flexibility of Astro JS, you can create a robust and efficient inline code editor tailored to your needs. Happy coding! Feel free to expand on this template by adding more advanced features, such as syntax highlighting for additional languages, theme customization, or integration with other Astro components. If you need any more help or details, just let me know!