A WebConsole available as a standard web component
<!DOCTYPE html>
<html>
<head>
<script src="web-console.js"></script>
</head>
<body>
<web-console theme="dark" height="full" max-history="1000"></web-console>
<script>
const console = document.querySelector('web-console');
console.log('Hello, World!', 'info');
console.log('This is a warning!', 'warning');
console.log('This is an error!', 'error');
console.logCollapsed('This is the summary.', 'This is the detailed message.');
console.logCollapsedMD('This is the summary.', 'This is the **detailed** message.');
console.addEventListener('input-submit', e => {
console.log(e.detail.input);
});
</script>
</body>
</html>-
Copy the
web-console.jsfile to your project directory. -
Include the script in your HTML file:
<script src="web-console.js"></script>- Use the
<web-console>element in your HTML file:
<web-console></web-console>This component requires native support for custom elements (v1), Shadow DOM (v1), and ES6. It has been tested in the following browsers:
- Chrome 73+
- Firefox 63+
- Safari 12+
- Edge 18+
For browsers that do not support custom elements, you can use the [Web Components polyfills](
To test the Web Console Component Interface locally, you can use the Python 3 HTTP server. Follow these steps:
-
Open a terminal and navigate to the directory containing your project files.
-
Start the HTTP server using the following command:
python -m http.server
- prompt:
string(default:>)
The prompt character shown before user input. - placeholder:
string(default:Type a command...)
Placeholder text for the input field. - theme:
'dark' | 'light' | 'custom'(default:dark)
Console color theme. - height:
string | 'full'(default:300px)
Height of the console output area. - max-history:
number(default:500)
Maximum number of messages to keep in history. - content:
string
Initial content to display in the console.
--console-bg: Console background color.--console-text: Console text color.--console-border: Console border color.--input-bg: Input background color.--input-text: Input text color.--input-border: Input border color.--input-focus-bg: Input background color when focused.--prompt-color: Color of the prompt messages.--error-color: Color for error messages.--warning-color: Color for warning messages.--info-color: Color for info messages.--console-height: Height of the console (when not using height attribute).
- log(message: string, type?: 'info' | 'warning' | 'error', isPrompt?: boolean)
Logs a plain text message with optional type. - logHTML(message: string, type?: 'info' | 'warning' | 'error', isPrompt?: boolean)
Logs a message with sanitized HTML formatting. - logMD(markdown: string, isError?: boolean)
Logs a message with Markdown formatting. - logCollapsed(message: string, detailedMessage: string)
Logs a collapsible message with plain text content. - logCollapsedMD(message: string, detailedMarkdown: string)
Logs a collapsible message with Markdown content in details.
- 'input-submit'
Fired when user submits input (press Enter).
detail: { input: string }
- marked.js: For Markdown parsing.
- DOMPurify: For HTML sanitization.