Universe is a lightweight & extensible code editor web component usable anywhere on the web.
MIT License
Universe is a lightweight, extensible code editor that can be used anywhere on the web.
You do not need have to build or compile Universe yourself to use it.
npm install
into your projectTypeScript support is built-in, not required.
Declaring an instance of the editor in your HTML you can do the following:
<universe-editor
language="sql"
mode="dark"
theme="invasion"
code="SELECT * FROM table">
</universe-editor>
For more advanced scenarios perhaps you need to declare properties more ad-hoc and you can do it with this method as well:
<script>
document.addEventListener("DOMContentLoaded", function() {
// Create an instance of OuterbaseEditor
const outerbaseEditor = document.createElement('universe-editor');
outerbaseEditor.setAttribute('language', 'sql');
outerbaseEditor.setAttribute('mode', 'dark');
outerbaseEditor.setAttribute('theme', 'invasion');
outerbaseEditor.setAttribute('code', 'SELECT * FROM table;');
// Create instances of plugins
const pluginA = new PluginA();
outerbaseEditor.setAttribute('plugin-a', 'some value that plugin expects')
// Register plugins with OuterbaseEditor
outerbaseEditor.registerPlugins([pluginA]);
// Append OuterbaseEditor to the DOM
document.body.appendChild(outerbaseEditor);
// Listen to event `change` to get the code from the editor
outerbaseEditor.addEventListener('change', (event) => {
console.log(event.detail.code);
});
});
</script>
To view an example of Universe in action you can clone this repository and run npx serve .
and visit the address it provides, then append /ui/index.html
.
Included in Universe are some core components that by default are utilized to help render necessary visual aspects of our code editor.
Syntax highlighting today is supported by Prism. If you look at the .ui/prism/*
there are default files there to support both Javascript and SQL syntax highlighting. To support additional languages we would advise to download new Prism styles and add them to this folder.
To declare which language you are using with Universe you pass in the language as a property:
<universe-editor language="sql"></universe-editor>
Note: By default we only support
sql
andjavascript
as language values.
Adding additional themes is made quite easy and mostly driven by CSS stylesheets.
Add a new file to the ./ui/themes
folder that exports a CSS string overriding values. Refer to invasion.js
and moondust.js
on how we override token value styles. Refer to Prism to learn more about what tokens are made available for overriding and it should be dependent on the language you are making themes for.
Add your new stylesheet export to the index.js
file where we already apply the two other default themes
// Apply styles for themes
this.applyStyle(moondustTheme);
this.applyStyle(invasionTheme);
this.applyStyle(INSERT_YOUR_THEME); // <- Add your styles
Extensibility is a primary objective of what we set out to achieve with Universe and we accomplish this by allowing anyone to write their own plugins that add to or alter the behavior of the code editor.
export class PluginA {
constructor() { }
init(parent, attributeValue) {
// Parent is an instance of the outerbase component
// attributeValue is the value of the attribute on the outerbase component
}
attributeName() {
return "plugin-a";
}
css() {
return `.pluginClass { color: red; }`;
}
html() {
return `<div class="pluginClass">Hello World</div>`
}
location() {
// Can be 'left', 'right', 'center'
return 'left'
}
insertAsParent() {
// Can be a CSS selector, default is false
return false
}
insertAsChild() {
// Can be a CSS selector, default is false
return false
}
insertBefore() {
// Can be true or false, default is false
return 1
}
attributeChangedCallback({ name, oldValue, newValue }) {
// Handle attribute changes if desired
}
onFocus() {
}
onBlur() {
}
onInputChange(value) {
}
onKeyDown(event) {
}
onMouseDown() {
}
onMouseUp() {
}
}
window.PluginA = PluginA;
If you want to add contributions to this repository, please follow the instructions here.
For support join our community on Discord. For enterprise solutions contact us at [email protected]
This project is licensed under the MIT license. See the LICENSE file for more info.