Ublime

Guide

Comment Ublime fonctionne

Ce document décrit le parcours complet — du clic dans le studio jusqu'au HTML affiché dans la démo — et les choix techniques qui le rendent fiable pour la facture électronique française.

1. Deux exports, deux usages

ublime-template.json — embarquement UBL

Un seul fichier avec xsl (feuille compilée) etpalette. C'est ce que votre ERP ou/api/package insère dans la facture — voirdétail UBL.

ublime-modele.json — édition & démo

Arbre de blocs (entête / corps / pied), réglages, palette, logo — pour rouvrir le studio ou tester dans la démo. Compile à la volée ; ne s'embarque pas tel quel dans l'UBL.

2. Le studio (éditeur WYSIWYG)

Le studio React assemble le modèle visuellement. Le canvas applique les mêmes CSS que l'aperçu final (facture.base.css + thèmes), alimenté par des données d'exemple UBL. L'onglet Société surcharge l'émetteur (SIRET, logo…) sans toucher au modèle exporté structurellement.

Avant export, Ublime peut signaler les champs obligatoires ou tableaux manquants (lignes de facture, sous-totaux TVA…) par rapport au socle CIUS-FR.

Ouvrir le studio →

3. Compilation WASM → Ublime-XSL

La crate Rust ublime-template transforme l'arbre de blocs en feuille XSL 1.0 dédiée au rendu Ublime. Le même code tourne :

  • dans le navigateur via ublime-template-wasm (preview instantanée),
  • sur le serveur POC ublime-server (compile / package / render).

Les champs d'adresse L2/L3 vides sont masqués à la compilation (xsl:if normalize-space), comme sur le canvas — pas de ligne fantôme sur la facture finale.

4. Embarquement dans l'UBL 2.1

L'export UBL regroupe XSL et palette dansublime-template.json. L'empaquetage les répartit en deux pièces jointes (ublime-xsl,ublime-palette).

Détail des balises UBL et garanties d'intégrité →

5. Rendu HTML et palette

render_preview(ubl, xsl) produit un fragment HTML. Les variables CSS (--pal-0…--role-titre…) sont injectées pour refléter la palette du modèle. Le résultat est enveloppé dans un document complet pour l'iframe d'aperçu.

6. Banc de démo UBL

La démo charge un modèle (fichier ou envoi depuis le studio via postMessage) et le teste contre huit scénarios XML : facture simple, multi-taux TVA, remise, livraison, adresse complète, etc. Chaque cas compile et rend indépendamment — idéal pour repérer un oubli de champ ou un bug de tableau.

Lancer le banc de démo →

Architecture monorepo

rfe/
├── crates/           # Moteur Rust (template, render, ubl, wasm, server)
├── packages/
│   └── ublime-react/  # @ublime/react — core, styles, preview, editor, demo
├── ublime-react/    # App studio (shell Vite)
├── ublime-demo/     # Banc de test UBL
└── ublime-www/      # Ce site (Astro)

La lib @ublime/react centralise la logique partagée : le studio et la démo consomment le même pipeline WASM, les mêmes CSS facture et les mêmes types de modèle.

Presets inclus

Sept modèles prêts à l'emploi couvrent le socle obligatoire avec des identités visuelles différentes :

  • Minimal — ardoise sobre
  • Classique — mise en page traditionnelle
  • Compact — dense, peu de marges
  • Cyberpunk / Hacker / Girly / Mario — palettes expressives

Par où commencer ?

  1. Ouvrir le studio et charger un preset depuis la galerie Modèles.
  2. Personnaliser la palette (onglet Style) et le logo (onglet Société).
  3. Cliquer Tester dans la démo pour valider sur plusieurs UBL.
  4. Exporter ublime-template.json (xsl + palette) pour l'intégration UBL.
StudioDémo