DEV Community

Cover image for Embed VSCode single file editor in your website.
Kavindu Santhusa
Kavindu Santhusa

Posted on

14 4

Embed VSCode single file editor in your website.

Today we're going to embed an code editor in website.
I had chosen the most popular IDE Visual Studio Code.
The Monaco Editor is the code editor that powers VS Code.
So we can use it to build a single file code editor

Features

  • Rich IntelliSense, Validation

    TypeScript, JavaScript, CSS, LESS, SCSS, JSON, HTML

  • Basic Syntax Colorization

    XML, PHP, C#, C++, Razor, Markdown, Diff, Java, VB, CoffeeScript, Handlebars, Batch, Pug, F#, Lua, Powershell, Python, Ruby, SASS, R, Objective-C

coding on laptop

Example

This is an quick example for embed vscode.

Example explained

First create a container for editor.

<div id="container" style="width:100%;height:80vh;border:1px solid grey"></div>
Enter fullscreen mode Exit fullscreen mode
  • width:100%; - takes full width
  • height:80vh; - takes 80% of the viewport height.
  • border:1px solid grey - just a border.

Then add loader for editor.
Here I am using jsDelivr as my CDN.

<script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.27.0/min/vs/loader.js"></script>
Enter fullscreen mode Exit fullscreen mode

This is the working code part. add this code inside an script tag below above code.

require.config({
  paths: { vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.27.0/min/vs" }
  });
require(["vs/editor/editor.main"], function () {
  var editor = monaco.editor.create(document.getElementById("container"), {
    value: code,
    language: "typescript",
    automaticLayout: true
  });
});
Enter fullscreen mode Exit fullscreen mode
  • require - AMD module loader(loads editor)
  • require.config() - configure to use jsDelivr.
  • value: code - code can be any code as string.
  • language: "typescript" - set programming language of code for language features.
  • automaticLayout: true - Makes it responsive.

Then enjoy it.
I hope to write more articles with advanced use cases of embedded editor.
Follow 🏃‍♂️ me for more articles.
Ask🙏 any question on comments section.
Star⭐ me if you love this article.

cover image by Unsplash
image(laptop) by Unsplash

Happy Coding 👩‍💻👩‍💻👩‍💻...
Thanks. ❤️❤️❤️

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay