Visuele Editor
Klik op elementen om tekst, kleuren, afstand, lettertypen en meer te bewerken. Ideaal voor kleine aanpassingen; gebruik de chat voor grotere wijzigingen.
Met de Visuele Editor kun je de gebruikersinterface van je app aanpassen door op elementen te klikken en hun eigenschappen direct te bewerken. Schakel over naar de Visual-modus in de builder-werkbalk om deze te activeren.
Hoe het werkt
Section titled “Hoe het werkt”- Schakel over naar de Visual-modus in de werkbalk (naast Preview, Code en Dashboard)
- Beweeg de muis over elementen in de preview — ze worden gemarkeerd met een overlay
- Klik op een element om het te selecteren
- Bewerk eigenschappen in het zijpaneel: tekst, kleuren, afstand, lettertypen, randen, afbeeldingen, effecten
Wijzigingen worden direct in de preview doorgevoerd en naar je bronbestanden geschreven. Gebruik de knop Reset last edit in de zijbalk om de laatste eigenschapswijziging ongedaan te maken.
Wat kan ik bewerken?
Section titled “Wat kan ik bewerken?”- Tekst — Bewerk tekst direct
- Lettergrootte — xs, sm, base, lg, xl, enz.
- Letterdikte — thin, light, normal, medium, semibold, bold, extrabold
- Letterfamilie — Geist, Inter, Montserrat, Noto Serif, Geist Mono, Fira Code, JetBrains Mono
- Letterstijl — Cursief aan/uit
- Tekstuitlijning — links, gecentreerd, rechts, uitgevuld
- Tekstkleur — Elke Tailwind-kleur
- Achtergrondkleur — Elke Tailwind-kleur
- Afstand — Padding en marge aan alle zijden
- Rand — Breedte, kleur en afronding (beschikbaar op containerelementen zonder tekstinhoud)
- Afbeelding — Vervang door een stockfoto via de zoekfunctie of upload je eigen afbeelding (van toepassing op img-elementen en achtergrondafbeeldingen)
- Effecten — Schaduw en doorzichtigheid
Ongedaan maken / Opnieuw uitvoeren
Section titled “Ongedaan maken / Opnieuw uitvoeren”Gebruik Cmd+Z (Mac) of Ctrl+Z (Windows) om wijzigingen ongedaan te maken. Cmd+Shift+Z / Ctrl+Shift+Z om opnieuw uit te voeren.
Paginapalet
Section titled “Paginapalet”De Visuele Editor analyseert je pagina en toont alle Tailwind-kleuren en CSS-aangepaste eigenschappen die al in gebruik zijn. Wanneer je de kleurkiezer opent voor het geselecteerde element, kun je kiezen uit dit paginapalet om consistent te blijven met je bestaande ontwerpsysteem, zonder hex-codes te hoeven raden.
De AI raadplegen over een geselecteerd element
Section titled “De AI raadplegen over een geselecteerd element”Voor aanpassingen die de eigenschappeneditor niet kan uitdrukken, typ je een korte prompt in het Ask AI-invoerveld onderaan de zijbalk. Het geselecteerde element wordt als context meegegeven, zodat prompts zoals “maak deze kaart compacter” of “voeg een hover-status toe met een subtiel ophefeffect” werken zonder dat je hoeft te beschrijven welk element je bedoelt.
Statische versus dynamische elementen
Section titled “Statische versus dynamische elementen”De Visuele Editor werkt het beste op statische elementen waarbij de className en tekstinhoud string literals zijn in de JSX. Voor dynamische elementen (berekende classNames, conditionele rendering, expressies) schakelt de editor automatisch terug naar de AI-chat met een gestructureerde prompt.
Wanneer gebruik ik de Visuele Editor?
Section titled “Wanneer gebruik ik de Visuele Editor?”De Visuele Editor is het meest geschikt voor kleine, snelle aanpassingen:
- Een typefout corrigeren
- Afstand aanpassen
- Een kleur wijzigen
- Knoptekst bijwerken
Voor grotere wijzigingen (nieuwe secties, herstructurering van de lay-out, nieuwe functies) gebruik je de AI-chat.
Hoe sla ik wijzigingen op?
Section titled “Hoe sla ik wijzigingen op?”Wijzigingen worden automatisch opgeslagen wanneer je een eigenschap bewerkt. Het bestand wordt naar je runtime geschreven en gecommit wanneer de AI of jij een commit aanmaakt.
Veelgestelde vragen
Section titled “Veelgestelde vragen”Kan ik visuele bewerkingen ongedaan maken?
Ja. Gebruik Cmd+Z / Ctrl+Z om ongedaan te maken. De Visuele Editor houdt zijn eigen ongedaan maken/opnieuw uitvoeren-stack bij.
Waarom kan ik sommige elementen wel bewerken en andere niet?
Statische tekst- en className-attributen kunnen direct worden bewerkt. Dynamische of berekende waarden (template literals, ternaire expressies, functieaanroepen) schakelen automatisch terug naar de AI-chat.
Wat is het verschil tussen de Visuele Editor en de Code Editor?
| Tool | Het beste voor |
|---|---|
| Visual Editor | Snelle eigenschapswijzigingen (tekst, kleuren, afstand) door te klikken |
| Code Editor | Volledige broncode-bewerking met VS Code |
| AI Chat | Complexe wijzigingen, nieuwe functies, debuggen |