WebEngine v1

Un éditeur visuel HTML/CSS/JS avec interface console et export multiple formats.

Fonctionnalités

Interface

• Vue Split : Arborescence, Console, Prévisualisation côte à côte
• Vue Console : Console plein écran
• Vue Tree : Arborescence seule
• Vue Preview : Prévisualisation seule
• Preview responsive : Desktop, Tablet, Mobile

Commandes Console

Commande	Description
add tag -id=x -class=y	Ajouter un élément
rm id	Supprimer un élément
mv id parentId	Déplacer un élément
style id prop value	Appliquer un style
class id className	Ajouter une classe
text id "texte"	Définir le texte
html id "<div>..."	HTML inline
event id eventName	Ajouter un événement
js code	Code JavaScript
var name value	Variable CSS
rule selector { ... }	Règle CSS
cd id	Naviguer vers un élément
up [n]	Remonter dans l'arborescence
clear	Effacer le projet
undo / redo	Annuler/Rétablir

Formats d'Export

• HTML : Page HTML complète
• React : Component + CSS + JS
• Vue : Single File Component (.vue)
• Svelte : Component Svelte
• Script : Commandes WebEngine (.txt)

Import

• HTML : Coller ou téléverser un fichier HTML
• Script : Importer un script de commandes

Installation

# Ouvrir dans un navigateur
cd WebEngine/v1
open index.html

Ou servir avec un serveur local :

npx serve WebEngine/v1

Structure du Projet

WebEngine/v1/
├── index.html    # Interface utilisateur
├── engine.js     # Moteur principal (FrameworkEngine)
└── init.js       # Commandes console (ConsoleEngine)

Architecture

FrameworkEngine (engine.js)

Gère l'arborescence DOM et l'export :

Tree (HTML)
  ├── addElement(), removeElement(), moveElement()
  ├── findElement(), findElementsBySelector()
  ├── generateHTML(), generateCSS(), generateJS()
  └── exportScript(), exportFull()

CSS Parsing
  ├── parseCSSRules() → cssVars, cssRules
  ├── generateCSS() → :root { --var: value }
  └── generateJS() → Event listeners

Import/Export
  ├── importFromHTML() → DOMParser
  ├── exportScript() → Commandes lisibles
  └── deduplicateTree() → Nettoyage

ConsoleEngine (init.js)

Parse et exécute les commandes :

parseCommand(command) → { command, args, options }
runCommand(command, args, options) → Exécution

Exemple de Script

# Structure
clear
add header -id=header -class="header"
add nav -parent=header -id=nav
add a -parent=nav -href="#home" -text="Accueil"

# Styles
var primary-color #3b82f6
rule .header { background: white; padding: 20px }

# Événements
js document.getElementById('header').addEventListener('click', () => {
    console.log('Header clicked!');
});

preview

Raccourcis Clavier

Raccourci	Action
Ctrl+Z	Annuler
Ctrl+Shift+Z	Rétablir
Ctrl+S	Sauvegarder
Ctrl+P	Rafraîchir preview

Navigateur Supporté

• Chrome/Edge (recommendé)
• Firefox
• Safari

Nécessite JavaScript activé et localStorage pour la sauvegarde.

Licence

?