{"id":8410,"date":"2024-12-18T22:59:23","date_gmt":"2024-12-18T17:29:23","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=8410"},"modified":"2024-12-18T22:59:27","modified_gmt":"2024-12-18T17:29:27","slug":"exploring-mui-toolpad-simplify-app-development","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/exploring-mui-toolpad-simplify-app-development\/","title":{"rendered":"Exploring MUI ToolPad : Simplify App Development"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">MUI Toolpad is a development framework built around Material UI, a popular react component library. Using MUI Toolpad, we can easily develop UI components and include most of the MUI features which are inbuilt.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Key Features<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Drag and Drop UI Builder<\/li>\n\n\n\n<li>Material UI Integration<\/li>\n\n\n\n<li>Data Binding<\/li>\n\n\n\n<li>Responsive design<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How to Get Started?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Follow the below steps to integrate MUI Toolpad in an application:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Install MUI toolpad in the application<br><code>npx create-toolpad-app@latest --<\/code>sample<\/li>\n\n\n\n<li>After the toolpad project is created, navigate to project directory and run:<br><code>npm install &amp;&amp; npm run dev<\/code><\/li>\n\n\n\n<li>Now hit the localhost in browser and we can see toolpad running with the basic template as shown<br> <br><img fetchpriority=\"high\" decoding=\"async\" width=\"809\" height=\"526\" class=\"wp-image-8416\" style=\"width: 650px\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2024\/12\/Screenshot-2024-12-18-223846.png\" alt=\"\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2024\/12\/Screenshot-2024-12-18-223846.png 809w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2024\/12\/Screenshot-2024-12-18-223846-300x195.png 300w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2024\/12\/Screenshot-2024-12-18-223846-768x499.png 768w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2024\/12\/Screenshot-2024-12-18-223846-461x300.png 461w\" sizes=\"(max-width: 809px) 100vw, 809px\" \/><br><\/li>\n\n\n\n<li>Add new pages inside dashboard folder and it will be displayed in sidebar along with navigation.<br>For Example, here &#8220;payments&#8221; menu is added in the sidebar.<br><br><img decoding=\"async\" width=\"798\" height=\"525\" class=\"wp-image-8418\" style=\"width: 650px\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2024\/12\/Screenshot-2024-12-18-224244.png\" alt=\"\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2024\/12\/Screenshot-2024-12-18-224244.png 798w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2024\/12\/Screenshot-2024-12-18-224244-300x197.png 300w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2024\/12\/Screenshot-2024-12-18-224244-768x505.png 768w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2024\/12\/Screenshot-2024-12-18-224244-456x300.png 456w\" sizes=\"(max-width: 798px) 100vw, 798px\" \/><br><br><img decoding=\"async\" width=\"938\" height=\"384\" class=\"wp-image-8419\" style=\"width: 650px\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2024\/12\/Screenshot-2024-12-18-224420.png\" alt=\"\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2024\/12\/Screenshot-2024-12-18-224420.png 938w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2024\/12\/Screenshot-2024-12-18-224420-300x123.png 300w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2024\/12\/Screenshot-2024-12-18-224420-768x314.png 768w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2024\/12\/Screenshot-2024-12-18-224420-733x300.png 733w\" sizes=\"(max-width: 938px) 100vw, 938px\" \/><br><br>This shows that a menu can be added in sidebar by creating a page for it under &#8220;dashboard&#8221; folder.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>App Provider<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It acts as a bridge between application&#8217;s runtime and toolpad component. The entire application or the part of the application that uses toolpad should be wrapped under App provider.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"330\" class=\"wp-image-8421\" style=\"width: 650px\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2024\/12\/Screenshot-2024-12-18-225008-1.png\" alt=\"\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2024\/12\/Screenshot-2024-12-18-225008-1.png 624w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2024\/12\/Screenshot-2024-12-18-225008-1-300x159.png 300w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2024\/12\/Screenshot-2024-12-18-225008-1-567x300.png 567w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hence the power of Material-UI toolpad with an intuitive interface and robust functionality, enables developers to create responsive applications without extensive coding.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>MUI Toolpad is a development framework built around Material UI, a popular react component library. Using MUI Toolpad, we can [&hellip;]<\/p>\n","protected":false},"author":503,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[],"class_list":["post-8410","post","type-post","status-publish","format-standard","hentry","category-web-architecture","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-2bE","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/8410","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/503"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=8410"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/8410\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=8410"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=8410"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=8410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}