Visual Editor
Klik op elementen om tekst, kleuren, afstand, lettertypen en meer aan te passen. Het beste voor kleine aanpassingen; gebruik de chat voor grotere wijzigingen.
Met de Visual Editor kun je de UI 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 hem te activeren.
Hoe het werkt
Section titled “Hoe het werkt”- Schakel over naar de Visual-modus — dit is een submodus van Preview in de werkbalk (de werkbalk heeft twee segmenten: Preview en Admin)
- 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 toegepast op de preview en weggeschreven naar je bronbestanden. 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 kopij 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 — Italic-schakelaar
- Tekstuitlijning — left, center, right, justify
- Tekstkleur — Elke Tailwind-kleur
- Achtergrondkleur — Elke Tailwind-kleur
- Afstand — Padding en margin aan alle zijden
- Rand — Breedte, kleur en radius (beschikbaar op containerelementen zonder tekstinhoud)
- Afbeelding — Vervang door een stockfoto via zoeken 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 Visual 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 dat je hexcodes hoeft te raden.
Vraag de AI iets over een geselecteerd element
Section titled “Vraag de AI iets over een geselecteerd element”Voor aanpassingen die de eigenschapsediteur 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-toestand toe met een subtiele lift” werken zonder dat je hoeft te beschrijven welk element je bedoelt.
Statische versus dynamische elementen
Section titled “Statische versus dynamische elementen”De Visual Editor werkt het beste op statische elementen waarbij de className en tekstinhoud letterlijke strings zijn in de JSX. Voor dynamische elementen (berekende classNames, conditionele rendering, expressies) valt de editor automatisch terug op de AI-chat met een gestructureerde prompt.
Wanneer gebruik ik de Visual Editor?
Section titled “Wanneer gebruik ik de Visual Editor?”De Visual Editor is het beste voor kleine, snelle aanpassingen:
- Een typfout corrigeren
- Afstand aanpassen
- Een kleur wijzigen
- Knoptekst bijwerken
Voor grotere wijzigingen (nieuwe secties, lay-outherstructureringen, nieuwe functies) gebruik je in plaats daarvan 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 weggeschreven naar je runtime, en de wijziging wordt bij de volgende builder-beurt die commits vastgelegd in je versiegeschiedenis.
Veelgestelde vragen
Section titled “Veelgestelde vragen”Kan ik visuele bewerkingen ongedaan maken?
Ja. Gebruik Cmd+Z / Ctrl+Z om ongedaan te maken. De Visual Editor heeft zijn eigen stapel voor ongedaan maken/opnieuw uitvoeren.
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) vallen automatisch terug op de AI-chat.
Wanneer gebruik ik de Visual Editor in plaats van de AI-chat?
| Tool | Het beste voor |
|---|---|
| Visual Editor | Snelle eigenschapswijzigingen (tekst, kleuren, afstand) door te klikken |
| AI Chat | Complexe wijzigingen, nieuwe functies, debuggen |
Dit zijn de enige twee manieren om je app te wijzigen — er is geen code-editor. Zie Je code bewerken en bekijken.