Developer utilities - BLACKICE Portal

Overview

BLACKICE Portal includes powerful web development tools that run entirely in your browser. Write, test, and share HTML, CSS, and JavaScript code without any setup.

CodeZap compiler

Live HTML/CSS/JS editor with instant preview

Real-time preview

See changes as you type

Collaboration

Code together in real-time

Export & share

Share code via URL or download files

CodeZap web compiler

Getting started

The CodeZap web compiler is a full-featured online code editor built with CodeMirror.

CodeZap uses CodeMirror 5 with Material Darker theme and includes syntax highlighting, bracket matching, and code folding.

Interface overview

Three-panel layout:

┌─────────────────────────────────┐
│  HTML  │  CSS  │  JavaScript   │ ← Tabs
├─────────────────────────────────┤
│                                 │
│      Code Editor (CodeMirror)   │
│                                 │
├─────────────────────────────────┤
│      Live Preview (iframe)      │
└─────────────────────────────────┘

Editor features:

Line numbers and gutter
Syntax highlighting for HTML, CSS, JS
Auto-closing brackets and tags
Code folding
Active line highlighting
Material Darker theme

Writing code

HTML tab
CSS tab
JavaScript tab

Write your HTML structure:

<h1>Hello, CodeZap!</h1>
<p>Start coding here...</p>
<div class="container">
  <button id="myButton">Click me</button>
</div>

Features:

Auto-close tags enabled
Tag matching highlights
HTML5 syntax support

Style your page:

body {
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 20px;
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.container {
  max-width: 800px;
  margin: 0 auto;
}

Features:

CSS3 syntax highlighting
Auto-completion for properties
Color preview inline

Add interactivity:

console.log("Welcome to CodeZap!");

document.getElementById('myButton').addEventListener('click', () => {
  alert('Button clicked!');
});

Features:

ES6+ syntax support
Console errors displayed
Auto-bracket matching

Live preview

The preview pane updates automatically as you type (with auto-run enabled). How it works:

// CodeZap combines your code into a single HTML document
const html = htmlEditor.getValue();
const css = `<style>${cssEditor.getValue()}</style>`;
const js = `<script>${jsEditor.getValue()}<\/script>`;
const content = `${html}${css}${js}`;

// Rendered in sandboxed iframe
preview.src = URL.createObjectURL(new Blob([content], { type: 'text/html' }));

Preview controls:

Auto Run toggle: Enable/disable automatic preview updates
Run Code button: Manually update preview
Fullscreen button: Expand preview to full screen
Exit fullscreen: Esc key or click × button

Collaboration features

Real-time collaboration

Code together with team members using Firebase real-time sync.

Collaboration uses Firebase Realtime Database for instant synchronization across all connected users.

Starting a collaboration session:

Click the 🤝 Collaborate button
Enter your name (required)
Choose an option:
- Create New Room: Generate a new room ID
- Join Existing Room: Enter a room name

Collaboration features:

Live sync

See changes from all users instantly

User presence

See who’s in the room

Live chat

Chat with collaborators

Activity logs

Track all room activities

Room management

Room features:

Room controls:
  - Read-only mode: Prevent others from editing
  - Snapshots: Save version history
  - Version history: Browse past versions
  - Share link: Copy room URL
  
User management:
  - Kick users (room creator only)
  - Promote to admin
  - See typing indicators
  - User avatars with initials

Activity tracking:

// Example activity log
{
  "timestamp": "15:32:45",
  "user": "Alice",
  "action": "Modified CSS",
  "type": "code_edit"
}

Collaboration permissions

Room creator:

Full edit access
Can kick users
Toggle read-only mode
Delete room

Regular users:

Edit code (if not read-only)
Send chat messages
View activity logs
Leave room anytime

Read-only mode:

View code only
See live updates
Cannot edit
Can still chat

Live chat

Built-in chat for collaborators. Using chat:

Click the 💬 button (bottom right)
Type your message (max 100 characters)
Press Enter or click ➤
Messages sync to all room members

Chat features:

Real-time message delivery
Timestamped messages
User identification
Unread message alerts
Persistent chat history

Save and export

Local save

Save your code to browser local storage. Save/Load workflow:

// Save code
localStorage.setItem('codezap_html', htmlEditor.getValue());
localStorage.setItem('codezap_css', cssEditor.getValue());
localStorage.setItem('codezap_js', jsEditor.getValue());

// Load code
htmlEditor.setValue(localStorage.getItem('codezap_html') || '');

Local storage saves up to 5-10MB. For larger projects, use export instead.

Export options

Download
Share URL
Cloud save

Export as HTML file:

Click ⬇ Export button
Downloads codezap_output.html
Contains all HTML, CSS, and JS combined
Ready to deploy anywhere

<!-- Downloaded file structure -->
<!DOCTYPE html>
<html>
  <!-- Your HTML -->
  <style>/* Your CSS */</style>
  <script>/* Your JS */</script>
</html>

Share via compressed URL:

Click 🔗 Share button
Code compressed using LZ-String
URL copied to clipboard
Anyone with link can view/edit

// URL format
https://portal.blackice.app/webcompiler.html?code=N4Ig...

Embed options

Embed your code in other websites. Embed modes:

Full compiler embed

Shows code editors + preview:

<iframe 
  src="https://portal.blackice.app/webcompiler.html?mode=full&code=..." 
  width="100%" 
  height="600px"
  frameborder="0">
</iframe>

Preview only embed

Auto-fullscreen preview with close button:

<iframe 
  src="https://portal.blackice.app/webcompiler.html?mode=preview&code=..." 
  width="100%" 
  height="400px"
  frameborder="0">
</iframe>

Advanced features

Repository compiler

Fetch and compile code from GitHub repositories. How to use:

Click Fetch Git button
Enter GitHub repository URL
Code automatically loaded into editor
Edit and preview immediately

Supported:

Public GitHub repositories
HTML, CSS, JS files
README parsing
Package.json detection

Error handling

CodeZap displays JavaScript errors in the error panel. Error display:

// Errors shown below preview
{
  "type": "JavaScript Error",
  "message": "Uncaught ReferenceError: x is not defined",
  "line": 12,
  "column": 5
}

CSS errors are not displayed but won’t break the page. Use browser DevTools for CSS debugging.

Auto-run toggle

Control when the preview updates. Auto-run ON (default):

Preview updates as you type
~500ms debounce delay
Smooth live coding experience

Auto-run OFF:

Manual control with Run button
Better for heavy computations
Prevents partial code execution

CodeMirror configuration

Editor settings

const baseConfig = {
  lineNumbers: true,
  theme: 'material-darker',
  indentUnit: 2,
  tabSize: 2,
  lineWrapping: true,
  autoCloseBrackets: true,
  matchBrackets: true,
  styleActiveLine: true,
  foldGutter: true,
  gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
};

Keyboard shortcuts

Editor shortcuts

Shortcut	Action
`Ctrl/Cmd + S`	Save to local storage
`Ctrl/Cmd + /`	Toggle comment
`Tab`	Indent selection
`Shift + Tab`	Outdent selection
`Ctrl/Cmd + F`	Find in code
`Ctrl/Cmd + H`	Find and replace
`Esc`	Exit fullscreen

Customization

Currently uses Material Darker theme. Future versions will support:

Multiple themes
Font size adjustment
Custom key bindings
Vim/Emacs modes

Performance

Optimization tips

Disable auto-run for large projects
Use code folding to collapse sections
Clear console regularly in browser DevTools
Export large projects instead of keeping in local storage

Limits

Browser limits:
  localStorage: ~5-10MB per domain
  URL length: ~2000 characters (compressed)
  Firebase: 100 concurrent connections per room
  
Recommended:
  HTML: < 5000 lines
  CSS: < 3000 lines
  JS: < 5000 lines

Troubleshooting

Preview not updating

Check auto-run toggle: Ensure it’s enabled (green)JavaScript errors: Check error panel for issuesRefresh page: Reload if preview iframe is frozenClear cache: Try incognito/private browsing mode

Code not saving

Local storage full: Clear old data or exportPrivate browsing: Local storage disabled in some browsersUse manual save: Click save button explicitly

Collaboration issues

Check internet: Firebase requires active connectionRoom name: Ensure all users use exact same room nameRefresh: Reload page if sync stopsPermissions: Check Firebase admin panel

Additional developer tools

BLACKICE Portal includes several other useful developer utilities:

QR Studio

Generate custom QR codes with styling options. Features:

Generate QR codes from any text or URL
Customize colors and styling
Download as PNG or SVG
Adjust size and error correction level
Instant preview

Access: Developer Tools → QR Code Generator

Link shortener

Create shortened URLs for easy sharing. Features:

Shorten long URLs
Custom short codes (optional)
Copy to clipboard
Track click statistics (if enabled)

Access: Developer Tools → Link Shortener

Markdown editor

Write and preview markdown documents in real-time. Features:

Live markdown preview
Split-pane editor
Syntax highlighting
Export to HTML
GitHub Flavored Markdown support

Access: Developer Tools → Markdown Editor

HTML viewer

Quick HTML preview tool for testing snippets. Features:

Instant HTML rendering
No setup required
Paste and preview
Debug console
Full HTML5 support

Access: Developer Tools → HTML Viewer

Repository compiler

Build and preview GitHub repositories directly in your browser. Features:

Fetch code from GitHub URLs
Compile and preview projects
Make edits and test changes
No local git setup needed

Access: Developer Tools → Repository Compiler

All developer tools run entirely in your browser with no server-side processing required.

Get Started

Features

Components

Pages

​Overview

CodeZap compiler

Real-time preview

Collaboration

Export & share

​CodeZap web compiler

​Getting started

​Interface overview

​Writing code

​Live preview

​Collaboration features

​Real-time collaboration

Live sync

User presence

Live chat

Activity logs

​Room management

​Live chat

​Save and export

​Local save

​Export options

​Embed options

​Advanced features

​Repository compiler

​Error handling

​Auto-run toggle

​CodeMirror configuration

​Editor settings

​Keyboard shortcuts

​Customization

​Performance

​Optimization tips

​Limits

​Troubleshooting

​Additional developer tools

​QR Studio

​Link shortener

​Markdown editor

​HTML viewer

​Repository compiler

​Next steps

Drawing tools

Collaboration

Build docs developers (and LLMs) love

Overview

CodeZap web compiler

Getting started

Interface overview

Writing code

Live preview

Collaboration features

Real-time collaboration

Room management

Live chat

Save and export

Local save

Export options

Embed options

Advanced features

Repository compiler

Error handling

Auto-run toggle

CodeMirror configuration

Editor settings

Keyboard shortcuts

Customization

Performance

Optimization tips

Limits

Troubleshooting

Additional developer tools

QR Studio

Link shortener

Markdown editor

HTML viewer

Repository compiler

Next steps