Skip to content

Home

Jump to bottom
Kashif Raza edited this page Apr 13, 2026 · 1 revision

KrizVibe Editor Wiki

AI-powered HTML/CSS/JS playground with Monaco editor, live preview and AI website generation.

Overview

KrizVibe Editor is a browser-based AI coding environment that allows users to build complete websites visually and interactively.

It combines:

  • HTML editor
  • CSS editor
  • JavaScript editor
  • Live preview
  • AI website generator
  • Local project saving

Everything runs inside the browser.

Features

KrizVibe AI

AI assistant that generates complete websites.

Example

Create a glassmorphism login page

AI returns:

[HTML]
...

[CSS]
...

[JS]
...

Editor automatically injects code.

Triple Editor

Three Monaco editors:

HTML Editor
CSS Editor
JS Editor

Features:

  • Syntax highlighting
  • IntelliSense
  • Auto formatting
  • Tabs
  • VS Code engine

Live Preview

Real-time preview updates automatically.

Workflow:

Write Code
     ↓
Preview Updates
     ↓
Edit Again

Supports:

  • New tab preview
  • Fullscreen preview
  • Instant rendering

Local Project Saving

Projects saved using localStorage.

No server
No database
No login

You can:

  • Save project
  • Load project
  • Delete project
  • Auto-save drafts

UI Layout

+------------------------------+
| Toolbar                      |
+------------------------------+
| HTML | CSS | JS              |
| Editor Panels                |
+------------------------------+
| Live Preview                 |
+------------------------------+
| AI Assistant                 |
+------------------------------+

Getting Started

Open Locally

index.html

Just open in browser.

Host Online

Upload to:

GitHub Pages
Netlify
Vercel
Static Hosting

No backend required.

AI Injection System

AI format:

[HTML]
code

[CSS]
code

[JS]
code

Parser loads:

HTML → HTML editor
CSS  → CSS editor
JS   → JS editor

Keyboard Shortcuts

CTRL + S        Save project
CTRL + ENTER    Run preview
CTRL + /        Toggle AI
CTRL + SHIFT+P  Command menu

Tech Stack

HTML
CSS
JavaScript
Monaco Editor
Pollinations AI
LocalStorage
FontAwesome

Project Structure

htmleditor/
│
├── index.html
├── favicon.ico
├── img/
├── README.md
├── LEARN.md
├── LICENSE.md
└── SECURITY.md

Example Workflow

Step 1

Open editor

Step 2

Ask AI:
Create landing page

Step 3

AI generates website

Step 4

Preview updates

Step 5

Save project

Done.

Use Cases

  • Learn HTML CSS JS
  • AI website generator
  • Code playground
  • Rapid prototyping
  • UI testing
  • Teaching editor

Contributing

You can contribute:

UI improvements
AI tuning
Bug fixes
Features
Performance

License

Open source

Free to use

Author

KrizVibe Editor
Created by Kashif Raza
https://github.com/altkriz

Clone this wiki locally