{"id":13447718,"url":"https://github.com/1j01/simple-console","last_synced_at":"2025-04-25T19:30:29.308Z","repository":{"id":7889675,"uuid":"56624037","full_name":"1j01/simple-console","owner":"1j01","description":"Add an elegant command-line interface to any page","archived":false,"fork":false,"pushed_at":"2022-04-26T19:01:30.000Z","size":130,"stargazers_count":143,"open_issues_count":6,"forks_count":28,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-04T02:21:52.536Z","etag":null,"topics":["cli","command","command-history","command-line","command-line-app","console","console-substitute","html","html5","javascript","log","web"],"latest_commit_sha":null,"homepage":"https://1j01.github.io/simple-console/","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/1j01.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-19T19:05:53.000Z","updated_at":"2025-03-14T17:25:44.000Z","dependencies_parsed_at":"2022-08-06T20:15:18.511Z","dependency_job_id":null,"html_url":"https://github.com/1j01/simple-console","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/1j01%2Fsimple-console","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/1j01%2Fsimple-console/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/1j01%2Fsimple-console/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/1j01%2Fsimple-console/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/1j01","download_url":"https://codeload.github.com/1j01/simple-console/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250882379,"owners_count":21502300,"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":["cli","command","command-history","command-line","command-line-app","console","console-substitute","html","html5","javascript","log","web"],"created_at":"2024-07-31T05:01:25.151Z","updated_at":"2025-04-25T19:30:29.022Z","avatar_url":"https://github.com/1j01.png","language":"JavaScript","readme":"\n# Simple Console\n\nSimple Console is nice clean command-line interface for the web.\n[Check out the demo!](https://1j01.github.io/simple-console/)\n\n![](screenshot.png)\n\n\n## Features\n\n* Light and [dark styles](#dark-mode)\n\n* Easy rich HTML [output](#consolelogcontent)\n\n* Command history accessible with up/down arrow keys, saved to `localStorage`\n\n* Command history menu for mobile accessibility\n\n* Doesn't create a duplicate history entry if you re-enter the last command\n\n* Lets you delete history entries with \u003ckbd\u003eShift+Delete\u003c/kbd\u003e\n\n* Automatically scrolls down to new entries - **unless** you scroll up\n(good in case there are a lot of messages being logged and you want to view earlier output!)\n\n* Includes [`aria`][] attributes, although the accessibility still needs work!\n\n* Vanilla JavaScript and CSS with no external dependencies\n\n* [MIT licensed](LICENSE)\n\n\n## Limitations\n\n- Delivered as two separate files (CSS and JS).  \n(It'd be nicer if it was a single JS file, and especially if it was a Web Component!\n[Wanna help out?](https://github.com/1j01/simple-console/issues/6))\n\n- The CSS uses some generic selectors like `error` and `success` that are [likely to conflict](https://github.com/1j01/simple-console/issues/9).\n\n- The `console.log`, and `console.warn` etc. methods only accept a single argument; they don't match the browser [console API](https://developer.mozilla.org/en-US/docs/Web/API/Console) - which doesn't have a standard specification, by the way, it's just some de facto shared methods between browsers.\n\n## Usage\n\nDownload `simple-console.css` and `simple-console.js`,\nand include in the `\u003chead\u003e`:\n```html\n\u003clink rel=\"stylesheet\" href=\"simple-console.css\"\u003e\n```\nand anywhere before you use `SimpleConsole` but probably in the `\u003cbody\u003e`:\n```html\n\u003cscript src=\"simple-console.js\"\u003e\u003c/script\u003e\n```\n\n### Example\n\n```js\nvar con = new SimpleConsole({\n\tplaceholder: \"Enter JavaScript\",\n\thandleCommand: function(command){\n\t\ttry {\n\t\t\tcon.log(eval(command));\n\t\t} catch(error) {\n\t\t\tcon.error(error);\n\t\t}\n\t},\n\tautofocus: true, // if the console is to be the primary interface of the page\n\tstorageID: \"app-console\", // or e.g. \"simple-console-#1\" or \"workspace-1:javascript-console\"\n});\n\n// add the console to the page\ndocument.body.appendChild(con.element);\n\n// show any uncaught errors (errors may be unrelated to the console usage)\ncon.handleUncaughtErrors();\n```\n\nSee [demo.js](demo.js) for a more complete example (altho not *that* complete).\n\n### Page Setup\n\nYou should probably include a `charset` and `viewport` [like in the demo](index.html).\n\nYou can position the console on the page the same way you might any div.\n\nTo make the console **take up the entire page**, use:\n```css\nhtml,\nbody {\n\theight: 100%;\n\tmargin: 0;\n\tdisplay: flex;\n\tflex: 1;\n}\n```\n\nFor a Quake-style dropdown console, see the [Tilde Dropdown Console Example](tilde.html).\n\n### Dark Mode\n\nThe dark styles take effect when the console element or any parent contains the class `dark`.\n\nYou could add a theme switcher like so:\n\n```js\nvar toggleDarkMode = function() {\n\tif (console.element.classList.contains(\"dark\")) {\n\t\tconsole.element.classList.remove(\"dark\");\n\t} else {\n\t\tconsole.element.classList.add(\"dark\");\n\t}\n};\nvar button = console.addButton(toggleDarkMode);\nbutton.textContent = \"◐\";\nbutton.setAttribute(\"title\", \"Toggle dark theme\");\nbutton.setAttribute(\"aria-label\", \"Toggle dark theme\");\n```\n\n### API\n\n#### `new SimpleConsole(options)`\n\nCreates a console instance.\n\n**Note:** The `SimpleConsole` object is referred to as `console` below, but you should probably give it a different name so it doesn't conflict with the global console object.\n\n`options.handleCommand(command)` is called when the user hits \u003ckbd\u003eEnter\u003c/kbd\u003e.\nYou can handle the input however you want.\nIt's recommended that you catch errors and log them with `console.error`.\nOther logging methods are documented below.\n\n`options.outputOnly` specifies that there should be no input.\nYou must specify either `outputOnly` or `handleCommand`.\n\n`options.placeholder` is strongly recommended especially with the default input styling as there is very little visual indication of the input (when it's not focused).\n\n`options.autofocus` should be used within an application where the console is the primary interface.\n\n`options.storageID` should be used to separate the command history of different consoles.\nIt's used as a [`localStorage`][] key prefix.\n\n#### `console.element`\n\nYou must use this to add the console to the page,\ne.g. `document.body.appendChild(console.element)`\n\n#### `console.input`\n\nThe console's `\u003cinput\u003e` element.\nCan be used to add controls/widgets\ni.e. `console.input.parentElement.appendChild(widget)`\n\n#### `console.addButton(action)`\n\nAdds a button to the right of the console's input area and returns the button element.\n\n`action` should be a function.\n\n#### `console.addPopupButton(updatePopup)`\n\nAdds a button with a popup to the right of the console's input area and returns the button element.\n\n`updatePopup(popupElement)` should update the contents of the popup.\n\nUse `addPopupMenuButton` instead if the popup's contents are a standard menu.\n\n#### `console.addPopupMenuButton(getItems)`\n\nAdds a button with a standard popup menu to the right of the console's input area and returns the button element.\n\n`getItems()` should return an array of items, with each item either of the form `{label, action}` or `{type: \"divider\"}`.\n\n#### `console.handleUncaughtErrors()`\n\nSets up a [`window.onerror`][] event listener which logs any uncaught errors to the console.\n\n#### `console.log(content)`\n\nLogs the given text or element to the console.\n\n#### `console.logHTML(html)`\n\nLogs the given HTML to the console.\n\n#### `console.error(content)`\n\nLogs the given error message (or element) to the console.\n\n#### `console.warn(content)`\n\nLogs the given warning message (or element) to the console.\n\n#### `console.info(content)`\n\nLogs the given info message (or element) to the console.\n\n#### `console.success(content)`\n\nLogs the given success message (or element) to the console.\n\n#### `console.getLastEntry()`\n\nReturns the last logged entry as an `HTMLDivElement` for further manipulation.\n\n#### `console.clear()`\n\nClears the console.\n\n\n### TODO\n\n* Support multiple arguments to `log`, `warn` etc.\n\n* Distinguish error/success/warning messages for screen readers (maybe with `cue-before` from the CSS Speech Module)\n\n* Solarized and retro themes\n\n* Position menus better?\n\n#### Packaging\n\n* Rename project because \"simple-console\" is taken on npm (\"cute-console\" maybe?)\n\n* This seems like it would be an *ideal* candidate for a Web Component!\n\n#### Input\n\n* Multiline input (i.e. `textarea`)\n\n* Autocomplete (`aria-autocomplete=\"inline\"`)\n\n* Syntax highlighting\n\n* Should probably just let you use your own input component\n\n#### FIXME\n\n* Fix duplicate reading of `aria-label` and `placeholder` by some screen readers\n\n* Fix input styling in Firefox with `font: inherit` and something else to make stuff line up perfectly\n\n\n### License\n\nMIT-licensed, see [LICENSE](LICENSE)\n\n[`aria`]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA\n[`window.onerror`]: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror\n[`localStorage`]: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F1j01%2Fsimple-console","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F1j01%2Fsimple-console","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F1j01%2Fsimple-console/lists"}