LogoLogo
Quest HomeSign Up
  • šŸ˜€Welcome to Quest
  • Getting Started
    • Quest Overview
    • Helpful Resources
    • Quick Start - Build your first component from Figma
    • Quick Start - Build your first component from a Wireframe
    • AI Prompt
  • Fundamentals
    • Customizing & Using the UI Kit
    • Designing Custom Components in Figma
    • Easily Sync Designs without Losing Work
    • Setting Up Props & Bindings
    • Exporting Code
    • Push to your Repository
    • Creating Responsive Components
    • Nesting Components
    • Workspaces & Apps
    • Code & Preview Mode
    • Prototypes/Wireframes
    • Animations - build with React Spring
    • Quest plugin for Figma Dev Mode
    • Publish on Quest to a URL
  • Features
    • Working with Variants & States
    • Naming Conventions
    • Previewing with Custom Fonts
    • Light & Dark Mode
    • Creating a custom Tooltip
    • Creating a Floating Popover
    • Creating a Dialog pop-up
    • Radio Group
    • Using the MUI Data Grid & Table
    • Data & List Bindings
    • Dynamic Bindings
    • Grid
    • File Upload
    • Design System Tab and Theme Import
    • How-to use a Theme in your Application
    • Accessibility Support
    • Design Tips and Tricks
    • Video
    • Lazy Loading
    • Sticky Position
    • Link
    • Custom Breakpoints
    • Min / Max Width
    • Supported Quest UI Kit Components & How-to Make Edits in Figma
    • Supported Chakra Components & How-to Make Edits in Figma
  • Advanced Tutorials
    • Setting up Bindings and Features on the MUI Button
    • Display Repeating Components based on a Dynamic List
    • How-to Pass Values from Parent to Nested Components
    • How-to Invoke a modal Dialog Box from a Button Click
    • How to Setup a popover
  • šŸ”Help
    • Product Updates
    • FAQs
    • Plugin Warnings / Alerts
  • šŸ’”Support
    • Why does my design look different in Quest than Figma?
    • Can I keep making changes in Figma without affecting code?
    • What are some best practices?
    • Does Quest support more than Figma and React?
    • How do I manage users?
    • What is the refund process?
    • How do I get in touch with Quest?
    • Do I have to use MUI if I'm using Quest?
Powered by GitBook
On this page
  • Export Settings
  • Component Routing
  • Exporting from Component Editor
  • Exporting from App tab
  • Formatting

Was this helpful?

  1. Fundamentals

Exporting Code

Various options to export code as per your needs.

PreviousSetting Up Props & BindingsNextPush to your Repository

Last updated 2 years ago

Was this helpful?

Quest generates code that you can extend as you see fit for your application. You have several options to export code based on your application and workflow requirements.

  • Framework Type: ReactJS or NextJS

  • Language Type: Javascript or Typescript

  • Single Component, Select files in your app, or the Entire App

  • Download to local or Push to your repository

Export Settings

Quest Export is based on your app settings. When you create an app in Quest, it has default settings but you can adjust them to your project requirements. Select framework, language, custom fonts and images paths. Exported code honors these settings: images and fonts are added to relevant folders, all imports in modules are absolute and respect set paths, app structure is set based on selected framework. To adjust remote repo settings, refer to .

Screenshot of Export Setting for your App

Component Routing

Each component has routing settings in the editor right side panel. You may set the component as a page and add a route, title and description for it. These settings are honored when a full app is generated. Quest will generate a page for each route in Next.js or add routes to the router in React app. We use React Router v6 for single page application routing in React app. Each page/route metadata will be added in the component in Next.js or in the component from the ā€œreact-helmetā€ package in React app.

All imports in Quest generated modules are absolute. For any export, whether it’s individual component or full app, you will receive jsconfig.json or tsconfig.json files based on file type in app settings. This file must be stored on the root level of your project and it enables absolute imports in the project.

You may download your code/push to your remote repository from app settings or from the editor.

Exporting from Component Editor

In the Quest Component editor, you may choose to download only component files, download an App Package with a generated fully deployable React/Next.js app with the current component as a root, or push the component to your remote repository based on the app settings.

Download/push to remote repo only files for a component. Generated files are:

  • ui file

  • hook file if conditions for generation are met

  • folder with assets if images are used in component UI

  • types.ts file for TypeScript project

  • tsconfig.json/jsconfig.json file based on selected language.

Download the ā€œApp Packageā€ - A full React or Next.js app package ready to be deployed or run on localhost is generated. All routing settings are disregarded and the current component is set as a home route. Components folder includes the current component and its child components. In your terminal, navigate to the downloaded folder, run ā€œnpm iā€ to install all packages the project depends on, then run ā€œnpm startā€ for React or ā€œnpm run devā€ for Next.js to see your project running on localhost.

Exporting from App tab

In App Settings, you may choose to download code or push to a remote repository. You may choose to do so only for the selected files of the project or the full app with routing settings of each component. Additionally you may set the root level component directly in the app settings. If you have a few components with the same route we may not know which one will be added to your router. Inspect routes carefully before exporting for predictable behavior of your app.

If you export a TypeScript project, the types.ts file will include an interface for each component props. When pushing to a remote repository, we detect if extra prop has been added and append it to the relevant interface. We never override or cleanup your types.ts file or hook file, but only append new values in the remote repo.

Download/push to remote repo select files - select only files you want to generate. Additionally types.ts file for TypeScript project and tsconfig.json/jsconfig.json file will be exported. The structure of files and imports in modules will be set based on the selected framework but framework files will not be exported.

Download/push to remote repo full app - a full CRA or Next.js app ready to be deployed or run on localhost will be exported. In your terminal, navigate to the downloaded folder, run ā€œnpm iā€ to install all packages the project depends on, then run ā€œnpm startā€ for React or ā€œnpm run devā€ for Next.js to see your project running on localhost.

Formatting

Quest uses Prettier to format code to adhere to the Airbnb style guide.

Push to your Repository - Quest Docs
Screenshot of Export Settings for your App