--- title: "Engineer's guide to multi-file frameworks - CoderPad Interview Docs" description: "Quickly get started using realistic multi-file frameworks for your interviews." canonical: "https://coderpad.io/resources/docs/interview/quick-start-guides/multi-file-frameworks-for-engineers/" last_modified: "2024-02-16 12:15:20" --- 1. [Docs home](https://coderpad.io/resources/docs/) / 2. [Interview](https://coderpad.io/resources/docs/interview/) / 3. [Quick start guides](https://coderpad.io/resources/docs/interview/quick-start-guides/) / 4. [Engineer’s guide to multi-file frameworks](https://coderpad.io/resources/docs/interview/quick-start-guides/multi-file-frameworks-for-engineers/) [Documentation menu](#docs-navigation) # Engineer’s guide to multi-file frameworks Last updated on February 16, 2024 It’s now easier to conduct more realistic interviews in the Interview platform- watch candidates make API calls, render user interfaces, connect to databases, and create a fully-functioning application all from the browser – with [nine popular multi-file frameworks](https://coderpad.io/languages/). [![A multifile pad with the file tree on the left, the file contents in the middle, and the rendered output and log console on the right.](https://coderpad.io/wp-content/uploads/2023/01/img_63bd750712d5c.png)](https://coderpad.io/wp-content/uploads/2023/01/img_63bd750712d5c.png) ## Table of Contents - [What you need to know](#what-you-need-to-know) - [What a frameworks pad looks like](#what-a-frameworks-pad-looks-like) - [How to get started](#how-to-get-started) - [Additional resources](#additional-resources) ## What you need to know - Available in [React](https://coderpad.io/languages/react/), [Vue](https://coderpad.io/languages/vue/), [Angular](https://coderpad.io/languages/angular/), [HTML/CSS/JS](https://coderpad.io/languages/html-css-js/), [Svelte](https://coderpad.io/languages/svelte/), [Node](https://coderpad.io/languages/node/), [Django](https://coderpad.io/languages/python-3/django/), [Spring](https://coderpad.io/languages/java/spring/), and [Ruby on Rails](https://coderpad.io/languages/ruby/rails/). - Add files and directories in the file tree on the left side of the pad. - Select files to display the contents in the middle of the pad. - The UI of the webapp renders on the right. You can copy the link at the top to open this view in its own browser tab. - In the bottom right corner you have access to the web server, an interactive shell (where you can import packages using`npm`or`pip3`, a console, and — if it’s a backend framework — an [API client](https://coderpad.io/resources/docs/interview/pads/api-client/). ## What a frameworks pad looks like [![A pad is displayed. the following is shown:](https://coderpad.io/wp-content/uploads/2023/01/img_63bd7508ba6d1.png)](https://coderpad.io/wp-content/uploads/2023/01/img_63bd7508ba6d1.png) ### See it in action: ## How to get started ![✅](https://coderpad.io/assets/emoji/2705.svg) You can try out the multi-file framework UI now in the [sandbox below](#sandbox). You have three options to create a multi-file pad: ### 1. Create a blank pad and select a framework In your Interview dashboard, navigate to your Pads List and select Create Pad. [![Interview dashboard with an arrow pointing to the "create pad" button in the pads list.](https://coderpad.io/wp-content/uploads/2023/01/img_63bd7509e1aab.png)](https://coderpad.io/wp-content/uploads/2023/01/img_63bd7509e1aab.png) Then select the Languages tab in the left nav menu and either click on the Frontend Frameworks or Backend Frameworks filters, locate your language in the list, or use the search bar at the top to find your desired language. [![A pad is open with the languages menu shown.](https://coderpad.io/wp-content/uploads/2023/11/image-14-1024x574.png)](https://coderpad.io/wp-content/uploads/2023/11/image-14.png) > ![ℹ️](https://coderpad.io/assets/emoji/2139.svg) [More information for creating pads can be found here](https://coderpad.io/resources/docs/interview/pads/creating-a-pad/). ### 2. Create a pad from a framework question First, create a multi-file question using the question wizard – [you can find detailed instructions here](https://coderpad.io/resources/docs/interview/question-bank/creating-and-editing-a-question/#creating-multi-file-questions). It’s similar to creating a regular question, except you’ll add files, file contents, and folders in the Edit Starter Code screen. [](https://coderpad.io/wp-content/uploads/2023/03/image-45.png) Once you’ve finished your question and hit Save, you’ll have the option to immediately create a pad from that question. ### 3. Load in a question Start by creating a blank pad like in the first option above. On the left nav menu, you can click on Questions to pull up your list of questions (1); from there you can select a framework question that you previously created (2) and it will populate the pad. You can also choose a question from the Examples questions list (3). [![A pad is open with a 1 pointing to the "questions" tab in the left nav bar and a 2 pointing to the "my content" tab and a 3 pointing to the "examples" tab in the question selection window.](https://coderpad.io/wp-content/uploads/2023/01/img_63bd750cbe82d.png)](https://coderpad.io/wp-content/uploads/2023/01/img_63bd750cbe82d.png) > ![ℹ️](https://coderpad.io/assets/emoji/2139.svg) [More information for creating questions can be found here.](https://coderpad.io/resources/docs/interview/question-bank/creating-and-editing-a-question/) ## Additional resources - [React interview questions](https://coderpad.io/blog/interviewing/example-react-interview-questions/) - [Creating a perfect frontend interview experience](https://coderpad.io/blog/interviewing/5-tips-for-interviewing-frontend/) - [Languages & Frameworks list](https://coderpad.io/languages/) - [Pad features](https://coderpad.io/resources/docs/interview/pads/using-pad-features/) - [Multi-file questions](https://coderpad.io/resources/docs/interview/question-bank/creating-and-editing-a-question/#creating-multi-file-questions) ### Sandbox Close Docs Index - [Screen](https://coderpad.io/resources/docs/screen/) Toggle children pages - [Quick start guides](https://coderpad.io/resources/docs/screen/recruiters-quickstart/) Toggle children pages - [Onboarding Checklist](https://coderpad.io/resources/docs/screen/recruiters-quickstart/screen-onboarding-checklist/) - [The CoderPad Screen Score Guide](https://coderpad.io/resources/docs/the-coderpad-screen-score-guide/) - [Video Guides](https://coderpad.io/resources/docs/screen/recruiters-quickstart/video-guides/) - [Tests](https://coderpad.io/resources/docs/screen/tests/) Toggle children pages - [Creating a test](https://coderpad.io/resources/docs/screen/tests/creating-a-test/) - [Customizing test content](https://coderpad.io/resources/docs/screen/tests/customizing-test-content/) - [Editing test settings](https://coderpad.io/resources/docs/screen/tests/editing-test-settings/) - [AI Tools for Screen](https://coderpad.io/resources/docs/screen/tests/ai-tools-for-screen/) - [Test management](https://coderpad.io/resources/docs/screen/tests/test-management/) - [Test retake requests](https://coderpad.io/resources/docs/screen/tests/test-retake-requests/) - [Cheating prevention and detection in Screen](https://coderpad.io/resources/docs/screen/tests/cheating-prevention-detection/) Toggle children pages - [Webcam proctoring](https://coderpad.io/resources/docs/screen/tests/cheating-prevention-detection/webcam-proctoring/) - [Test Insights](https://coderpad.io/resources/docs/test-insights/) - [Projects NEW](https://coderpad.io/resources/docs/screen/tests/projects/) - [Candidate management](https://coderpad.io/resources/docs/screen/candidate-management/) Toggle children pages - [Anonymizing candidates](https://coderpad.io/resources/docs/screen/candidate-management/anonymizing-candidates/) - [Import candidates from CSV file](https://coderpad.io/resources/docs/screen/candidate-management/import-candidates-from-csv-file/) - [Candidate reports](https://coderpad.io/resources/docs/screen/candidate-reports/) Toggle children pages - [Candidates dashboard](https://coderpad.io/resources/docs/screen/candidate-reports/candidate-dashboard/) - [Code playback](https://coderpad.io/resources/docs/screen/candidate-reports/code-playback/) - [Fixing an incorrectly marked question](https://coderpad.io/resources/docs/screen/candidate-reports/fixing-an-incorrectly-marked-question/) - [Error messages in candidate reports](https://coderpad.io/resources/docs/screen/candidate-reports/error-messages-in-candidate-reports/) - [Customizing questions](https://coderpad.io/resources/docs/screen/customizing-questions/) Toggle children pages - [Creating custom questions](https://coderpad.io/resources/docs/screen/customizing-questions/creating-custom-questions/) Toggle children pages - [Custom Project questions](https://coderpad.io/resources/docs/screen/customizing-questions/creating-custom-questions/custom-project-questions/) - [Importing questions](https://coderpad.io/resources/docs/screen/customizing-questions/importing-questions/) - [Customized domains and skills](https://coderpad.io/resources/docs/screen/customizing-questions/customized-domains-and-skills/) - [Sharing your custom questions](https://coderpad.io/resources/docs/screen/customizing-questions/sharing-your-custom-questions/) - [Integrations](https://coderpad.io/resources/docs/screen/integrations/) Toggle children pages - [Ashby for Screen](https://coderpad.io/resources/docs/screen/integrations/ashby-for-screen/) - [Greenhouse for Screen](https://coderpad.io/resources/docs/screen/integrations/greenhouse/) - [iCIMS](https://coderpad.io/resources/docs/screen/integrations/icims/) - [Jobvite](https://coderpad.io/resources/docs/screen/integrations/jobvite/) - [Lever](https://coderpad.io/resources/docs/screen/integrations/lever/) - [SmartRecruiters](https://coderpad.io/resources/docs/screen/integrations/smartrecruiters/) - [Taleez](https://coderpad.io/resources/docs/screen/integrations/taleez/) - [Taleo](https://coderpad.io/resources/docs/screen/integrations/taleo/) - [Teamtailor](https://coderpad.io/resources/docs/screen/integrations/teamtailor/) - [Workable](https://coderpad.io/resources/docs/screen/integrations/workable/) - [Workday](https://coderpad.io/resources/docs/screen/integrations/workday/) - [Account management](https://coderpad.io/resources/docs/screen/account-management/) Toggle children pages - [Editing your profile](https://coderpad.io/resources/docs/screen/account-management/editing-your-profile/) - [Managing users & teams](https://coderpad.io/resources/docs/screen/account-management/managing-users/) - [Billing](https://coderpad.io/resources/docs/interview/account-mgmt/billing-history/) - [Configure data protection](https://coderpad.io/resources/docs/screen/account-management/configure-data-protection/) - [Insights](https://coderpad.io/resources/docs/interview/account-mgmt/insights/) - [SSO](https://coderpad.io/resources/docs/screen/account-management/sso/) Toggle children pages - [Okta SSO legacy process](https://coderpad.io/resources/docs/screen/account-management/sso/okta-sso-legacy-process/) - [Cancel your subscription](https://coderpad.io/resources/docs/interview/account-mgmt/unsubscribing/) - [More](https://coderpad.io/resources/docs/screen/more-screen-resources/) Toggle children pages - [FAQ](https://coderpad.io/faqs/#screen-faq) - [Supported languages, frameworks, & technologies](https://coderpad.io/resources/docs/screen/more-screen-resources/supported-languages-frameworks-technologies/) Toggle children pages - [Available domains](https://coderpad.io/resources/docs/screen/more-screen-resources/supported-languages-frameworks-technologies/available-domains/) - [What compiler does my Screen project run on?](https://coderpad.io/resources/docs/screen/more-screen-resources/supported-languages-frameworks-technologies/what-compiler-does-my-screen-project-run-on/) - [What compiler does my Screen test run on?](https://coderpad.io/resources/docs/screen/more-screen-resources/supported-languages-frameworks-technologies/what-compiler-does-my-test-run-on/) - [Supported browser versions](https://coderpad.io/resources/docs/screen/more-screen-resources/supported-languages-frameworks-technologies/browser-versions/) - [API key access](https://coderpad.io/resources/docs/screen/more-screen-resources/api-key-access/) - [Accessibility](https://coderpad.io/resources/docs/accessibility/) - [API documentation](https://coderpad.io/resources/docs/screen/more-screen-resources/api-documentation/) - [Troubleshooting Screen](https://coderpad.io/resources/docs/screen/more-screen-resources/troubleshoot/) - [Static code analysis](https://coderpad.io/resources/docs/screen/more-screen-resources/static-code-analysis/) - [Code editor](https://coderpad.io/resources/docs/screen/more-screen-resources/monaco-code-editor/) - [Report a question leak](https://coderpad.io/resources/docs/screen/more-screen-resources/report-a-question-leak/) - [Interview](https://coderpad.io/resources/docs/interview/) Toggle children pages - [Quick start guides](https://coderpad.io/resources/docs/interview/quick-start-guides/) Toggle children pages - [Onboarding Checklist](https://coderpad.io/resources/docs/interview/quick-start-guides/interview-onboarding-checklist/) - [Interviewers](https://coderpad.io/resources/docs/interview/quick-start-guides/interviewers/) Toggle children pages - [Live Interview quick start](https://coderpad.io/resources/docs/interview/quick-start-guides/interviewers/live-interview-pads/) - [Take-home project quick start](https://coderpad.io/resources/docs/interview/quick-start-guides/interviewers/take-home-projects/) - [Interview best practices](https://coderpad.io/resources/docs/interview/quick-start-guides/interviewers/interview-best-practices/) - [Recruiters](https://coderpad.io/resources/docs/interview/quick-start-guides/recruiters/) - [Account administrators](https://coderpad.io/resources/docs/interview/quick-start-guides/account-admins/) - [Video Guides](https://coderpad.io/resources/docs/interview/quick-start-guides/coderpad-interview-quickstart-video-guides/) - [Engineer’s guide to multi-file frameworks](https://coderpad.io/resources/docs/interview/quick-start-guides/multi-file-frameworks-for-engineers/) - [Talent acquisition’s guide to multi-file frameworks](https://coderpad.io/resources/docs/interview/quick-start-guides/multi-file-frameworks-for-talent-acquisition-teams/) - [Pads](https://coderpad.io/resources/docs/interview/pads/) Toggle children pages - [Creating a pad](https://coderpad.io/resources/docs/interview/pads/creating-a-pad/) - [Using pad features](https://coderpad.io/resources/docs/interview/pads/using-pad-features/) - [Jupyter Notebooks](https://coderpad.io/resources/docs/interview/pads/jupyter-notebooks/) - [API client](https://coderpad.io/resources/docs/interview/pads/api-client/) - [AI Tools for Interview](https://coderpad.io/resources/docs/interview/pads/interview-ai-assist/) - [Code editor](https://coderpad.io/resources/docs/interview/pads/code-editor/) - [Video & audio chat](https://coderpad.io/resources/docs/interview/pads/video-and-audio-call/) Toggle children pages - [AI Notetaker](https://coderpad.io/resources/docs/interview/pads/live-interview-transcription/) - [Interview Highlights NEW](https://coderpad.io/resources/docs/interview-highlights/) - [Interview Outlines NEW](https://coderpad.io/resources/docs/interview/pads/video-and-audio-call/interview-outlines/) - [Private Interviewer Notes](https://coderpad.io/resources/docs/interview/pads/private-interviewer-notes/) - [Settings](https://coderpad.io/resources/docs/interview/pads/settings/) - [Keyboard shortcuts](https://coderpad.io/resources/docs/interview/pads/keyboard-shortcuts/) - [Playback & Pad Summary](https://coderpad.io/resources/docs/interview/pads/playback-mode/) - [Duplicate pads](https://coderpad.io/resources/docs/interview/pads/duplicate-pads/) - [Pad bulk actions](https://coderpad.io/resources/docs/interview/pads/pad-bulk-actions/) - [Drawing mode](https://coderpad.io/resources/docs/interview/drawing-mode/) - [Interview question bank](https://coderpad.io/resources/docs/interview/question-bank/) Toggle children pages - [Creating and editing questions](https://coderpad.io/resources/docs/interview/question-bank/creating-and-editing-a-question/) - [Example questions](https://coderpad.io/resources/docs/interview/question-bank/example-questions/) - [Test cases](https://coderpad.io/resources/docs/interview/question-bank/test-cases/) - [Focus Time](https://coderpad.io/resources/docs/interview/focus-time/) - [Databases](https://coderpad.io/resources/docs/interview/databases/) - [Custom files](https://coderpad.io/resources/docs/interview/custom-files/) - [Integrations](https://coderpad.io/resources/docs/interview/integrations/) Toggle children pages - [Ashby for Interview](https://coderpad.io/resources/docs/interview/integrations/ashby/) - [GoodTime](https://coderpad.io/resources/docs/interview/integrations/goodtime/) - [Google Chrome Calendar extension](https://coderpad.io/resources/docs/interview/integrations/google-chrome-calendar-extension/) - [Greenhouse for Interview](https://coderpad.io/resources/docs/interview/integrations/greenhouse/) Toggle children pages - [Greenhouse live interview integration](https://coderpad.io/resources/docs/interview/integrations/greenhouse/live-interview-integration/) - [Greenhouse take-home projects integration](https://coderpad.io/resources/docs/interview/integrations/greenhouse/take-home-integration/) - [iCIMS](https://coderpad.io/resources/docs/interview/integrations/icims/) - [Lever](https://coderpad.io/resources/docs/interview/integrations/lever/) - [Gem](https://support.gem.com/hc/en-us/articles/26933157317399-How-do-I-connect-my-CoderPad-account) - [SmartRecruiters](https://coderpad.io/resources/docs/interview/integrations/smartrecruiters/) - [ModernLoop](https://modernloop.notion.site/coderpad) - [Workday](https://coderpad.io/resources/docs/screen/integrations/workday/) - [Account management](https://coderpad.io/resources/docs/interview/account-mgmt/) Toggle children pages - [Team management](https://coderpad.io/resources/docs/interview/account-mgmt/team-management/) - [Managing users](https://coderpad.io/resources/docs/interview/account-mgmt/managing-users/) - [SSO](https://coderpad.io/resources/docs/screen/account-management/sso/) - [Insights](https://coderpad.io/resources/docs/interview/account-mgmt/insights/) - [Billing](https://coderpad.io/resources/docs/interview/account-mgmt/billing-history/) - [Canceling your subscription](https://coderpad.io/resources/docs/interview/account-mgmt/unsubscribing/) - [More](https://coderpad.io/resources/docs/interview/more-interview-resources/) Toggle children pages - [Cheating prevention and detection in Interview](https://coderpad.io/resources/docs/cheating-prevention-in-interview/) - [FAQ](https://coderpad.io/faqs/#live-faq) - [Accessibility](https://coderpad.io/resources/docs/accessibility/) - [Supported technologies & languages](https://coderpad.io/resources/docs/interview/more-interview-resources/supported-technologies-languages/) Toggle children pages - [Languages & frameworks](https://coderpad.io/languages/) - [Unit testing](https://coderpad.io/resources/docs/unit-testing/) Toggle children pages - [Using Jest with React](https://coderpad.io/resources/docs/unit-testing/using-jest-with-react/) - [Supported browser versions](https://coderpad.io/resources/docs/screen/more-screen-resources/supported-languages-frameworks-technologies/browser-versions/) - [API key access](https://coderpad.io/resources/docs/interview/more-interview-resources/api-key/) - [API documentation](https://coderpad.io/resources/docs/interview/more-interview-resources/api-documentation/) - [Troubleshooting](https://coderpad.io/resources/docs/interview/more-interview-resources/troubleshooting/) - [Server statuses](https://status.coderpad.io/?_gl=1*ta4d92*_ga*MTkzMTE2ODYyMC4xNjU4MjQ5Mzcw*_ga_XBQ5N5CE2N*MTY2NzQxOTY5OS4yNjIuMS4xNjY3NDIxNDQ0LjAuMC4w&_ga=2.62808234.704669655.1667307151-1931168620.1658249370) - [Data management and privacy policy](https://coderpad.io/privacy/) - [AI Fluency](https://coderpad.io/resources/docs/ai-fluency/) - [For candidates](https://coderpad.io/resources/docs/for-candidates/) Toggle children pages - [Screen preparation guide](https://coderpad.io/resources/docs/for-candidates/screen-preparation-guide/) Toggle children pages - [Webcam and microphone access](https://coderpad.io/resources/docs/for-candidates/screen-preparation-guide/webcam-access/) - [Projects exercises](https://coderpad.io/resources/docs/for-candidates/screen-preparation-guide/projects-exercises/) - [Interview preparation guide](https://coderpad.io/resources/docs/for-candidates/interview-preparation-guide/) Toggle children pages - [Try the sandbox](https://coderpad.io/resources/docs/for-candidates/interview-preparation-guide/sandbox/) - [FAQ](https://coderpad.io/faqs/#faq-do-candidates-have-to-register-an-account-or-pay-to-use-interview) - [What’s new?](https://coderpad.io/resources/docs/changelog/)