GeezerVison

Why you might want this

Sometimes your website needs a simple code editor that is easier on the eyes than a text box, yet quick to set up and pleasant enough for light editing work.

Whether you have code samples on your blog for people to play with, a CMS where employees want to edit email templates, or a billion-dollar app where customers want to edit CSV files they uploaded,

CodeBedder can help everyone code - better.

• Lightweight - 1.54KB gzipped, then add syntax highlighting with a library like PrismJS
• Use anywhere - an HTML web component that is easy to integrate with any website
• Highlight anything - specify any language supported by syntax highlighting libraries

Why not?

You might need something more advanced. This is a really simple code editor. You can't change indentation with Tab/Shift+Tab, or automatically insert spaces when you hit Enter.

Need more full-featured code editing? We can help you make the right pick!
Contact us for consulting.

Try it online

• eMaily - a demo HTML/MJML editor with live preview and data templating
• This website - yes, go play with the editor if you haven't yet!

Want to add it to your website?

Download codebedder.js, prism.js, and prism.css, or create a custom build of PrismJS to support languages other than HTML/CSS/JavaScript. For an HTML editor use the script as follows:

<html>
  <head>
    <link href="prism.css" rel="stylesheet" />
  </head>
  <body>
    <code-bedder data-language="html" onhighlight="Prism.highlightElement(this)">YOUR_ESCAPED_HTML_CODE_HERE</code-bedder>
    <script src="prism.js"></script>
    <script src="codebedder.js"></script>
  </body>
</html>

Psst, you can also check out the source code for this page.

Need more guidance?

This library is free to use however you like.

If you need help integrating code editing into your website, we also offer the following consulting service packages:

🌱 Mini

We'll help you set up a CodeBedder editor for HTML with instant preview in one page on your website.

Suitable for light editing of content like code samples or templates loaded from a database.

🌵 Plus

We'll help you set up a CodeBedder editor for any language with a custom preview in up to 3 pages on your website.

Example integrations:

• Templating libraries like Handlebars or Mustache
• MJML - for writing responsive email templates
• PHP - editing and previewing a .php script

🌷 Xtra

Got many pages in need of a code editor? Need a more advanced preview functionality?

Or some custom feature you're missing from CodeBedder?

Reach out to us to get an offer!