Pourquoi docn-ui existe
Créer un beau PDF était une contrainte récurrente dans mon équipe. La tâche revenait souvent aux quelques développeurs les plus à l’aise avec le design, car assembler un document restait bien moins simple que construire une interface sobre avec des composants modernes.
J’ai conçu docn-ui seul pour réduire cet écart : une collection open source de composants et de modèles PDF destinée aux développeurs qui utilisent déjà shadcn. L’objectif était simple : combiner des briques distinctes et obtenir un résultat convaincant sans repenser chaque document depuis zéro.
Un registre plutôt qu’une nouvelle librairie
Le registre n’encapsule pas des composants de site web. Il distribue du code propre aux PDF, fondé sur @react-pdf/renderer, avec des formats validés, des polices locales et des adaptateurs de rendu distincts pour le navigateur et Node.
- Choisir un composant ou un modèle dans un catalogue construit à partir de vrais aperçus PDF.
- Installer son code et ses dépendances limitées avec le CLI officiel de shadcn.
- Composer des données validées localement, générer le PDF, puis inspecter ou télécharger les mêmes octets.
Rendre l’outil compréhensible
La principale difficulté n’était pas de générer un PDF, mais de construire l’expérience développeur autour de l’outil. Son fonctionnement me paraissait naturel en tant que concepteur ; la documentation devait rendre l’installation, la composition, les contraintes physiques et la personnalisation évidentes dès la première visite.
Chaque page de composant relie donc un véritable aperçu PDF à son rôle, son API typée, son utilisation, ses limites, sa commande d’installation et son code source. La vérification couvre aussi la géométrie réelle des PDF, les parcours navigateur et des installations isolées dans des projets React/Vite et Node/TypeScript.
Mesurer l’usage sans profiler les visiteurs
Le site public combine deux niveaux d’analyse complémentaires. Vercel Web Analytics mesure anonymement les pages vues, les routes, les pays et les référents. PostHog enregistre seulement une liste limitée d’actions utiles — aperçu, téléchargement, copie et intention d’installation — en mode cookieless, sans autocapture, profil utilisateur ni replay de session.
Un tableau de bord privé, développé séparément avec Next.js et shadcn/ui, interroge les agrégats des deux fournisseurs côté serveur sans tenter de relier leurs visiteurs. Il permet aussi d’exporter un rapport PDF composé avec les propres briques de docn-ui.
Une bêta publique fonctionnelle
La bêta actuelle réunit 18 modèles répartis entre factures, reçus, CV, rapports, badges et cartes de visite. Le résultat dont je suis le plus fier est de pouvoir assembler ces compositions denses à partir de briques explicites et réutilisables, plutôt que de reconstruire chaque mise en page à la main.
La prochaine priorité est la clarté, pas le nombre de fonctionnalités : rendre la documentation plus facile à prendre en main et ajouter des composants lorsque des besoins réels le justifient. docn-ui m’a aussi appris à concevoir plus consciemment des outils pour d’autres développeurs, et pas seulement des applications pour leurs utilisateurs.