datathere was built to be familiar at first look. I designed the foundational components as the first step to have an intuitive and clean interface.
shadow-sm
0 1px 2px rgba(0,0,0,0.04)
shadow-md
0 4px 12px rgba(0,0,0,0.06)
shadow-lg
0 8px 24px rgba(0,0,0,0.08)
After foundations, I built improved versions of commonly used patterns. All improvements are very targeted and minimal to keep the intuitive nature of the app.
Add source
Connect a CSV, JSON, or API. Datathere will infer the schema on upload.
Tooltip
Hover card
Dialog
Sample size
Unmapped required field
No sources yet
Connect a CSV, JSON, or API to start mapping.
The pipeline view is one of my more experimental builds. It is more colorful and has very dense information. I built it as a key visualized navigational starting point for most users. It has information on all steps and navigations built from each component. It's a real use case assembly of my foundations and primitives.
Diving deeper from the pipeline, the mapping detail page combines my principles. The goal is to visually clarify what is happening without having to describe or fill it with informational text.
Customers → Warehouse
Direct integer primary key match.
Email pattern detected in 99.7% of source rows.
Joins first and last name into the destination's single display name.
Parses 12-hour source format into ISO 8601.
Sums order totals per customer; non-USD orders converted at the current FX rate.
True if the customer has a COMPLETED order in the last 90 days.
No source field tracks session activity. Consider adding a sessions source.
No source contains referral attribution data.
The Sankey diagram is a custom component I built outside of our component system. This is a simple way to show exactly where users started with source data and what happened to each row. It's a clear display of accountability with actions tied to each step.
The relationship canvas is another custom component I built outside of our component system. It is an intuitive display of relational database-like relationships that are required to tie sources together. I modified it to show details provided by agents such as confidence logic and join conditions.