glossary.mdx

title	description	icon
Glossary	Learn the key development terms you need to navigate and use Lovable effectively.	bookmark

General Concepts

• AI (Artificial Intelligence): The simulation of human intelligence processes by machines, especially computer systems, enabling tasks like learning, reasoning, and problem-solving.​

• Prompt: A piece of text or input that guides AI models in generating outputs or performing certain tasks.​ It is within the core functionality of Lovable and it is with prompts that you create, modify a specific component or element in your application.

Lovable-Specific Terms

• Chat Mode: Lovable goes beyond just generating code; it becomes an interactive assistant guiding you through every phase of development. It helps founders think critically, plan effectively, debug intelligently, and ship confidently.

• Edit Mode: The action of making changes or modifications to content or code.​

• Edit: A tool that allows AI-driven development with Tailwind-native visual controls for easy refinement.

• History: The system of tracking and managing changes to your app and code over time.​

• Knowledge: Capture essential project details in a living document that evolves with your app.

• Labs: Experimental features within Lovable dedicated to testing and showcasing new, innovative, or in-development functionalities.​ These might be modified or be removed at any time.

• Remix: You can remix an existing public project or one of your own. Remixing allows you to reuse the current state of a project as a starting point and build upon it. It’s a great way to explore new ideas, make adjustments, or iterate with different changes while preserving the original version. Note that it is not possible to remix projects when Supabase is connected.

• Preview: Allows users to view or experience live content or feature functionalities before it is finalized or published, in an interactive way.

• Diff: A comparison that shows the differences between two versions of a file or code.​

• /index: Refers to the main or default page of a website or app, often named "index.html" or "index.js".

• Builder.io: Integration that enables users to export Figma designs directly into Lovable to build full-stack apps without coding.

Product & Development Concepts

Product Management & Strategy

• MVP (Minimum Viable Product) – A version of a product with just enough features to satisfy early adopters and validate an idea before full-scale development.

• Roadmap – A high-level strategic plan that outlines the vision, direction, and planned features for a product over time.

• Feature Request – A formal or informal suggestion from users or stakeholders for a new capability in a product.

• User Story – A short, simple description of a feature or requirement written from the perspective of an end user.

• User Journey: The series of steps a user takes to achieve a specific goal within a product or service.​

• Persona: A fictional representation of a target user, based on research, to guide design and development decisions.​

Engineering Concepts

• PRD (Product Requirements Document): A comprehensive document that outlines the objectives, features, and specifications of a product to guide development.​

• API (Application Programming Interface): A way for different services to communicate. Think of it as a protocol that tells you what kind of information you can get or send between systems. The most common types are REST APIs, which many sites use, and GraphQL APIs, which offer a more flexible approach to querying data.

• Refactor: The process of restructuring existing code without changing its external behavior to improve readability, maintainability, or performance.

• GitHub: A web-based platform for version control and collaborative software development using Git.​

Data & Analytics

• A/B Testing – A method of comparing two versions of a webpage or feature to determine which performs better based on user behavior.

• Conversion Rate – The percentage of users who complete a desired action, such as signing up or making a purchase.

• Churn Rate – The percentage of users who stop using a product over a given period.

• Retention Rate – The percentage of users who continue using a product over time.

• Event Tracking – Monitoring specific user actions (e.g., button clicks, form submissions) to gather insights on behavior and engagement.

UI/UX and Frontend Development Playbook

Frontend Development

• Frontend: The part of a software application that users interact with directly, encompassing the user interface and user experience elements.​

• React: A JavaScript library developed by Facebook for building user interfaces, particularly single-page applications.​

• Gradient: A gradual transition between two or more colors or shades in design.

• Tailwind CSS: Open-source utility-first CSS framework that provides a comprehensive set of pre-defined classes, enabling developers to build custom designs directly within their HTML by applying these utility classes to elements.

• Design Systems: A collection of reusable components, guidelines, and standards that ensure consistency and coherence in design across a product or brand.

UI/UX Design Concepts

• Accent Color: A distinctive hue used to highlight key elements in a design, often aligning with or complementing the brand's primary color to enhance visual interest.​

• Theme: A cohesive set of design choices, including colors, fonts, and layouts, that define the overall aesthetic and user experience of an application or website.​

• Responsive Design: An approach to web design ensuring that content adapts seamlessly across various device sizes and orientations, providing an optimal user experience.

• Above the Fold: The portion of a webpage visible to users without scrolling, crucial for capturing attention and conveying essential information immediately. ​

• CTA (Call to Action): A prompt, often in the form of a button or link, encouraging users to perform a specific action, such as "Sign Up" or "Learn More." ​

Page Structure & Navigation

• Headings (Titles): Text elements that introduce and organize content sections, typically formatted with varying levels (e.g., H1, H2) to establish a clear content hierarchy.​

• Footer: The bottom section of a webpage, commonly containing supplementary information such as contact details, navigation links, and legal disclaimers. ​

• Breadcrumb: A navigational aid displaying the user's current location within a site's hierarchy, often represented as a horizontal list of links. ​

• Favicon – A small icon displayed in the browser tab, bookmarks, and search results, typically representing a brand or website.

• Meta Title (Title Tag) – The title of a webpage that appears in search engine results and browser tabs, influencing SEO and user click-through rates.

• Meta Description – A short summary of a webpage’s content displayed in search engine results, aimed at improving discoverability and user engagement.

• Canonical URL – A tag used to specify the preferred version of a webpage, helping to avoid duplicate content issues in search engine indexing.

• URL Slug – The part of a URL that identifies a particular page in a readable format (e.g., example.com/product-name).

• Sitemap – A structured file (XML or HTML) that provides a list of a website’s pages, helping search engines index them efficiently.

• Navigation Bar (Nav Bar) – A horizontal or vertical menu providing links to essential sections of a website for easy navigation.

• Skip Links – Hidden links that allow users to bypass repetitive content and navigate directly to the main content, improving accessibility.

• Pagination – A method of dividing content into multiple pages, commonly used in blogs, search results, and product listings to improve user experience.

• Anchor Link – A hyperlink that directs users to a specific section within the same page instead of loading a new page.

• 404 Page – A custom error page displayed when a user tries to access a non-existent URL, guiding them back to relevant content.

Notifications & Feedback Elements

• Toast: A brief, non-intrusive notification that appears temporarily to inform users of an action's outcome or provide simple feedback. ​

• Snackbar – Similar to a toast, but typically located at the bottom of the screen with optional actions (e.g., "Undo" on a deleted item).

• Tooltip – A small pop-up box that provides additional information when hovering over or focusing on an element.

• Badge – A small visual indicator, often used on icons or buttons, to show notifications, counts, or status updates.

• Loading Spinner (Loader) – A visual indicator that represents a process in progress, such as loading a page or submitting a form.

• Progress Bar – A horizontal bar that indicates the completion percentage of a task or process.

• Skeleton Loader – A placeholder UI that mimics the layout of the final content while waiting for it to load, improving perceived performance.

Overlays & Pop-Ups

• Popover: A transient overlay that presents additional information or options related to a specific UI element, typically appearing upon user interaction. ​

• Dialog (Modal): A window that appears in front of the main content to capture user attention, often requiring an action before returning to the primary interface.

• Drawer (Sidebar Panel) – A panel that slides in from the side of the screen to display navigation options or settings without disrupting the main content.

• Lightbox – A modal window that displays images or media in an enlarged view, dimming the background for focus.

• Alert Box – A system-generated or application-triggered message box that informs users of important information, such as errors or warnings.

Navigation & Selection Elements

• Button: A clickable element that initiates an action or event, such as submitting a form or opening a dialog.​

• Switch (Toggle): A toggle control enabling users to switch between two states, such as on or off, often resembling a physical switch. ​

• Tabs – A component that organizes content into separate views within a single interface, allowing users to switch between sections without navigating away.

• Stepper (Wizard) – A component used for multi-step processes, showing users their current step and guiding them through completion.

• Pagination – A UI pattern that divides content into pages, often used for search results or content-heavy applications.

• Breadcrumb – A navigational aid displaying the user's current location within a site's hierarchy, often represented as a horizontal list of links.

• Accordion – A collapsible section that expands or contracts to reveal or hide content dynamically.

• Dropdown Menu – A list of options that appears when a user clicks or hovers over a button or field, often used for navigation or selection.

Forms & Input Elements

• Form: A structured collection of input fields allowing users to submit data, such as contact information or search queries.​

• Radio Group: A set of related radio buttons permitting users to select only one option from multiple choices.

• Checkbox: An interactive box that users can check or uncheck to select or deselect an option, allowing multiple selections within a set.​

• Text Field (Input Field) – A basic UI element where users can enter text, such as in search bars, login forms, or comments.

• Text Area – A larger input field designed for multiline text input, commonly used for messages or feedback forms.

• Select (Dropdown Select Box) – A UI element that allows users to choose one option from a predefined list, often styled as a dropdown.

• Date Picker – A UI element that lets users select a date from a calendar instead of manually typing it.

• Slider (Range Selector) – A control that allows users to set a value within a range by sliding a handle along a track.

• File Upload Field – A component that lets users select and upload files from their device.

• Autocomplete (Typeahead Search) – A text input that dynamically suggests matching results as users type, improving usability in searches.

Design Styles & Trends

You can use those terms in any of your prompt to describe a specific style you are trying to achieve.

• Neobrutalism: A web design trend characterized by raw, unpolished elements, bold typography, and high contrast, drawing inspiration from mid-20th-century Brutalist architecture. ​

• Retro: Design that incorporates styles, motifs, and elements from past decades, evoking nostalgia and vintage aesthetics.​

• Hacker: An aesthetic that reflects the DIY and open-source culture, often featuring monospaced fonts, dark backgrounds, and terminal-inspired interfaces.​

• Glass (Glassmorphism): A design style uses translucent, frosted glass-like elements with subtle shadows and borders to create depth.​

• Nudy: A minimalist design approach that utilizes nude or neutral color palettes to create a soft and understated aesthetic.​

Design & Asset Resources

• 21st.dev: An open-source community registry offering minimal, modern, and reusable React UI components powered by Tailwind CSS and Radix UI, designed to help design engineers ship polished user interfaces more efficiently.

• Dribble: A leading online community where designers and creative professionals showcase their work, discover design inspiration, and connect with potential clients or collaborators.

• Noun Project: A platform providing a vast collection of free icons and stock photos, enabling users to access visual resources for various projects.

• SVG Repo: A comprehensive library of over 500,000 open-licensed SVG vectors and icons, allowing users to search, explore, edit, and download graphics suitable for diverse projects.

• Google Fonts: A free library of web-optimized fonts, offering designers and developers a wide selection of typography options to enhance their projects.

• Typewolf: A resource that assists designers in selecting the perfect font combinations for their projects by showcasing trending typefaces and offering curated font lists.

Backend Development & Databases

Backend Fundamentals

• Backend: The server-side infrastructure of an application that handles data processing, storage, and business logic.​

• Supabase: An open-source backend-as-a-service platform that provides a Postgres database, authentication, instant APIs, and real-time capabilities.

• Webhooks – Event-driven HTTP callbacks that notify external applications when specific actions occur.

Database Management & Querying

• CRUD (Create, Read, Update, Delete): The four basic operations performed on data in a database or application.​

• SQL (Structured Query Language): A domain-specific programming language designed for managing and manipulating relational databases, enabling tasks such as querying, updating, and organizing data.

• PostgreSQL – A powerful open-source relational database known for its scalability, extensibility, and ACID compliance.

Supabase-Specific Concepts

• Edge Function: Server-side TypeScript functions, distributed globally at the edge—close to your users. They can be used for listening to webhooks or integrating your Supabase project with third-parties like Stripe, Anthropic or Resend.

• RLS (Row-Level Security): A feature in databases that allows control over access to specific rows in a table based on user roles or attributes - basically allowing users to set granular authorization rules, allowing you to write complex SQL rules that fit your unique business needs.

• Storage: A service or system for storing and managing data, such as images, videos, documents, and any other file type.

• Bucket: In Supabase Storage, a bucket is a distinct container that organizes files and folders, determining the access model (public or private) and setting upload restrictions like maximum file size and allowed content types.

• Endpoint: In the context of Supabase, an endpoint refers to a specific URL that allows clients to interact with the database through RESTful API calls, enabling operations like creating, reading, updating, or deleting data.

• Authentication Provider: An entity or service that verifies user credentials, enabling secure access to applications or systems. In the context of Supabase, authentication providers include various methods such as password-based logins, magic links, one-time passwords (OTP), social logins, and single sign-on (SSO) integrations, facilitating flexible and secure user authentication.

Security & Authentifcation

• OAuth – A widely-used authentication protocol that enables users to log in to applications using third-party services like Google, Facebook, or GitHub.

• Two-Factor Authentication (2FA) – A security measure that requires users to provide two forms of identification before accessing an account.

• CORS (Cross-Origin Resource Sharing) – A security policy that controls which websites or applications can access resources on a server.