STRUDEL Kit
Welcome to the STRUDEL Kit Docs! STRUDEL Kit is a web development toolkit for building scientific UIs based on the STRUDEL Design System and Task Flows. The toolkit helps users build out scientific Task Flows as usable web applications. It consists of a full React-based starter template with a suite of inner demos for common UI patterns in scientific apps. Apps built with STRUDEL are pre-baked with much of the setup you need to turn complex Task Flows into efficient and highly usable experiences for your users.
Visit strudel.science for more information about the STRUDEL project.
Key Features
- Base scaffolding for a modern, modular React web application project
- Fully customizable templates for common Task Flows in scientific software
- Consistent user experience
- Automated file-based routing with TanStack Router
How does it work?
STRUDEL Kit brings together multiple open source tools as well as its own set of templates and lightweight components to offer a cohesive system in which someone can quickly jump in and start developing a modern, usable scientific web app. There are two main pieces to web applications built with STRUDEL Kit: the base app and the Task Flow templates.
The base app provides the basic scaffolding you need to get started building a web app. It consists of a preconfigured architecture of open source tools and custom components. Here's what's included:
The Task Flow templates are pre-built flows of React components for common patterns in scientific UIs. The template components are configured to plug right into the base app but you can also plug them into existing React apps with a little bit of restructuring.
Once you have generated your base app and the inner Task Flows, you have full reign to customize the app. STRUDEL Kit is a great way to get your app started but in most cases you will have project-specific customizations and requirements. For this reason, STRUDEL Kit does not lock you into any particular tool and gives you full freedom to edit the templates as you see fit. You can add in new libraries, replace ones that came with the Kit, or just keep building within the system you set up with STRUDEL Kit.
Motivation
There are many tools out there to help make building web applications easier for developers and better for end users but few tools target the unique needs of scientific software UIs. STRUDEL aims to be a go-to resource for Research Scientists and Research Software Engineers who want to build tools that offer a great user experience that can help advance their research goals.
Instead of reinventing the wheel from the ground up, STRUDEL Kit leverages existing open source tools and tries to fill in the gaps when it comes to building scientific web applications. We think that implementing a good task flow in a UI is vital to a good user experience. STRUDEL focuses on high level flows and components to help make good user experience more accessible to the scientific software community.
Who should use STRUDEL Kit?
STRUDEL Kit aims to be a useful tool for experts in frontend engineering and an approachable batteries-included tool for engineers and computational scientists who have only some experience with web development. Understanding JavaScript, TypeScript, and React are important for being able to customize the apps you build with STRUDEL Kit. However, STRUDEL Kit also offers tutorials that teach you how to make basic changes to the inner React code and don't assume you are an expert.
Before getting started, we recommend having some familiarity with the command line, JavaScript, and React. Check out our curated list of resources for getting started with some of STRUDEL Kit's foundational technologies.