{"id":14990272,"url":"https://github.com/outerbase/universe","last_synced_at":"2025-04-12T02:10:16.433Z","repository":{"id":237771422,"uuid":"725873135","full_name":"outerbase/universe","owner":"outerbase","description":"Universe is a lightweight \u0026 extensible code editor web component usable anywhere on the web.","archived":false,"fork":false,"pushed_at":"2024-08-03T00:00:36.000Z","size":910,"stargazers_count":7,"open_issues_count":6,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-01T03:01:17.850Z","etag":null,"topics":["editor","html","javascript","web-component"],"latest_commit_sha":null,"homepage":"https://outerbase.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/outerbase.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"contributing.md","funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-12-01T03:34:50.000Z","updated_at":"2024-09-06T05:10:19.000Z","dependencies_parsed_at":"2024-06-04T13:51:01.854Z","dependency_job_id":"44858131-098e-46cb-8230-eb920fdc1ee3","html_url":"https://github.com/outerbase/universe","commit_stats":{"total_commits":85,"total_committers":2,"mean_commits":42.5,"dds":"0.19999999999999996","last_synced_commit":"e9a6bee60fb91f2f3ef80cb851d4b602953c37d5"},"previous_names":["outerbase/universe"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/outerbase%2Funiverse","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/outerbase%2Funiverse/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/outerbase%2Funiverse/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/outerbase%2Funiverse/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/outerbase","download_url":"https://codeload.github.com/outerbase/universe/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219849702,"owners_count":16556324,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["editor","html","javascript","web-component"],"created_at":"2024-09-24T14:19:48.565Z","updated_at":"2024-10-14T02:03:20.283Z","avatar_url":"https://github.com/outerbase.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n    \u003ch1\u003eUniverse\u003c/h1\u003e\n    \u003ca href=\"https://www.npmjs.com/package/@outerbase/universe\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@outerbase/universe.svg?style=flat\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/outerbase/universe/blob/main/CONTRIBUTING.md\"\u003e\u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-MIT-blue\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://discord.gg/4M6AXzGG84\"\u003e\u003cimg alt=\"Discord\" src=\"https://img.shields.io/discord/1123612147704934400?label=Discord\"\u003e\u003c/a\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://www.outerbase.com/\"\u003eWebsite\u003c/a\u003e\n    \u003cspan\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n    \u003ca href=\"https://www.docs.outerbase.com/\"\u003eDocs\u003c/a\u003e\n    \u003cspan\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n    \u003ca href=\"https://www.outerbase.com/blog/\"\u003eBlog\u003c/a\u003e\n    \u003cspan\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n    \u003ca href=\"https://discord.gg/4M6AXzGG84\"\u003eDiscord\u003c/a\u003e\n    \u003cspan\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n    \u003ca href=\"https://twitter.com/outerbase\"\u003eTwitter\u003c/a\u003e\n    \u003cbr /\u003e\n    \u003chr /\u003e\n\u003c/div\u003e\n\n## What is Universe?\n\nUniverse is a lightweight, extensible code editor that can be used anywhere on the web.\n\n- [**Core Components**](#core-components): Essentials of a code editor.\n- [**Syntax Highlighting**](#syntax-highlighting): Style your code tokens based on your language.\n- [**Theme Support**](#theme-support): Customize how your code syntax looks.\n- [**Custom Plugins**](#custom-plugins): Extend the functionality with custom plugins.\n\n## Usage\n\nYou do not need have to build or compile Universe yourself to use it.\n\n- Load directly from our CDN\n- Host the bundle.js yourself\n- `npm install` into your project\n\nTypeScript support is built-in, **not** required.\n\nDeclaring an instance of the editor in your HTML you can do the following:\n```html\n\u003cuniverse-editor \n    language=\"sql\" \n    mode=\"dark\" \n    theme=\"invasion\" \n    code=\"SELECT * FROM table\"\u003e\n\u003c/universe-editor\u003e\n```\n\nFor more advanced scenarios perhaps you need to declare properties more ad-hoc and you can do it with this method as well:\n\n```html\n\u003cscript\u003e\n    document.addEventListener(\"DOMContentLoaded\", function() {\n        // Create an instance of OuterbaseEditor\n        const outerbaseEditor = document.createElement('universe-editor');\n        outerbaseEditor.setAttribute('language', 'sql');\n        outerbaseEditor.setAttribute('mode', 'dark');\n        outerbaseEditor.setAttribute('theme', 'invasion');\n        outerbaseEditor.setAttribute('code', 'SELECT * FROM table;');\n\n        // Create instances of plugins\n        const pluginA = new PluginA();\n        outerbaseEditor.setAttribute('plugin-a', 'some value that plugin expects')\n\n        // Register plugins with OuterbaseEditor\n        outerbaseEditor.registerPlugins([pluginA]);\n\n        // Append OuterbaseEditor to the DOM\n        document.body.appendChild(outerbaseEditor);\n\n        // Listen to event `change` to get the code from the editor\n        outerbaseEditor.addEventListener('change', (event) =\u003e {\n            console.log(event.detail.code);\n        });\n    });\n\u003c/script\u003e\n```\n\n## Example\n\nTo 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`.\n\n## Core Components\n\nIncluded in Universe are some core components that by default are utilized to help render necessary visual aspects of our code editor.\n\n- **Core Editor** - Shows the syntax highlighted code and input area for the user.\n- **Core Line Numbers** - Line numbers that appear to the left of the code editor.\n- **Core Line Highlighting** - A visual indication of what line is currently selected, a basic background div.\n- **Core Shortcuts** - Non-visual keyboard listening class to perform custom actions when key combinations are triggered.\n\n## Syntax Highlighting\n\nSyntax highlighting today is supported by [Prism](https://prismjs.com/download.html). 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.\n\nTo declare which language you are using with Universe you pass in the language as a property:\n\n```html\n\u003cuniverse-editor language=\"sql\"\u003e\u003c/universe-editor\u003e\n```\n\n\u003e Note: By default we only support `sql` and `javascript` as language values.\n\n## Theme Support\n\nAdding additional themes is made quite easy and mostly driven by CSS stylesheets.\n\n1. 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](https://prismjs.com) to learn more about what tokens are made available for overriding and it should be dependent on the language you are making themes for.\n\n2. Add your new stylesheet export to the `index.js` file where we already apply the two other default themes\n```ts\n// Apply styles for themes\nthis.applyStyle(moondustTheme);\nthis.applyStyle(invasionTheme);\nthis.applyStyle(INSERT_YOUR_THEME); // \u003c- Add your styles\n```\n\n## Custom Plugins\n\nExtensibility 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.\n\n```ts\nexport class PluginA {\n    constructor() { }\n\n    init(parent, attributeValue) {\n        // Parent is an instance of the outerbase component\n        // attributeValue is the value of the attribute on the outerbase component   \n    }\n\n    attributeName() {\n        return \"plugin-a\";\n    }\n\n    css() {\n        return `.pluginClass { color: red; }`;\n    }\n\n    html() {\n        return `\u003cdiv class=\"pluginClass\"\u003eHello World\u003c/div\u003e`\n    }\n\n    location() {\n        // Can be 'left', 'right', 'center'\n        return 'left'\n    }\n\n    insertAsParent() {\n        // Can be a CSS selector, default is false\n        return false\n    }\n\n    insertAsChild() {\n        // Can be a CSS selector, default is false\n        return false\n    }\n\n    insertBefore() {\n        // Can be true or false, default is false\n        return 1\n    }\n\n    attributeChangedCallback({ name, oldValue, newValue }) {\n        // Handle attribute changes if desired\n    }\n\n    onFocus() {\n        \n    }\n\n    onBlur() {\n        \n    }\n\n    onInputChange(value) {\n        \n    }\n\n    onKeyDown(event) {\n        \n    }\n\n    onMouseDown() {\n        \n    }\n\n    onMouseUp() {\n        \n    }\n}\n\nwindow.PluginA = PluginA;\n```\n\n## Contributing\n\nIf you want to add contributions to this repository, please follow the instructions [here](contributing.md).\n\n## Support\n\nFor support join our community on [Discord](https://discord.gg/4M6AXzGG84). For enterprise solutions contact us at [support@outerbase.com](mailto:support@outerbase.com)\n\n## License\n\nThis project is licensed under the MIT license. See the [LICENSE](./LICENSE.txt) file for more info.\n\n## Our Contributors\n\n\u003cimg align=\"left\" src=\"https://contributors-img.web.app/image?repo=outerbase/universe\"/\u003e","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fouterbase%2Funiverse","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fouterbase%2Funiverse","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fouterbase%2Funiverse/lists"}