Web Engine
WebEngine est un éditeur visuel HTML/CSS/JS fonctionnant directement dans le navigateur. Créez des interfaces via des commandes console, importez du code existant et exportez vers HTML, React, Vue ou Svelte. Sauvegarde automatique et preview responsive. Simplicité et puissance combinées.
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
?
