DEV Community: Toma Rares

Trace digests for LLM monitoring, at 1/30th the price of Sonnet

Toma Rares — Thu, 30 Jul 2026 16:26:11 +0000

We run one LLM call on every agent trace we ingest: it reduces the trace to a short, searchable digest. Because it runs on every trace from every customer, it is the most frequent LLM call we make, and its cost is the one that grows fastest with our usage.

So we tested whether a cheaper model could do it. Sonnet 4.6 writes that digest today at about $3.45 per 1,000 traces, and plenty of models cost a fraction of that. We put four of them against Sonnet on a frozen set of 50 traces. The one we shipped runs at about a thirtieth of the cost with search returning the same traces, and the two that looked cheapest on the price sheet both failed.

The harder part was checking it. A cheaper model can write summaries that read perfectly and still change what search returns, so we graded each model on the search its digests feed, checking whether the same query returned the same traces.

A messy trace becomes one structured digest call, and the digests are what you search.

Motivation

We build Glassray, an eval platform for AI agents in production. To know whether an agent did its job, you read its traces, so trace data is what we work with all day. The digest is how we make that data usable: our search, clustering, and monitoring all run on it, not on the raw spans. It has to be accurate, and because it runs on every trace, it also has to be cheap.

Results

Every model got the same inputs: a frozen set of 50 trace inputs (real traces plus synthesized ones spanning many languages, code, SQL, multi-tool runs, crashed runs, and oversized traces that trip our truncation caps), three full runs each. Four cheaper models were the candidates; Claude Sonnet 4.6, the model we run today, is the control that sets the bar. To pass, a candidate had to hold Sonnet's per-rule pass rates within a calibrated noise band and keep search returning the same traces. The calibration and the rule-by-rule evidence are below; the one-line summary, cost and reliability on the left and quality against the Sonnet baseline on the right, is here:

Model	Cost ($/1k)	Latency	Valid JSON	Quality rules	Language	Topic	Search overlap	Verdict
Claude Sonnet 4.6 (today)	$3.45	~3s	99.3%	baseline	100%	0.96	0.79-0.84	reference
Claude Haiku 4.5	$1.11	~2.1s	100%	all held	94%	0.83	0.62-0.63	✅ second closest
gpt-4o-mini	$0.11	~1.6s	100%	held	92-96%	0.76	0.51-0.55	✅ winner
Kimi K2.5	$1.61	~21s	86.7%	5 regressions	30-47%	0.67-0.76	0.56-0.63	❌ fails
Gemini 2.5 Flash-Lite	$0.06	~1.0s	92.0%	4 regressions	96-98%	0.71	0.52-0.56	❌ fails

Reading the columns:

Quality rules: how the candidate scored against Sonnet on the seven trace-grounded rules the digest promises, after the plus-or-minus-4-point noise band is applied. "Held" means no rule dropped beyond the band; "N regressions" counts the rules that did.
Language and Topic compare the candidate's language tag and topic label against the baseline. Kimi's language score collapses because it writes "English" where the schema wants en.
Search overlap is top-3 nearest-neighbor overlap against the incumbent's corpus, same embedding model as production. Sonnet's own 0.79-0.84 (it against a second Sonnet run) is the ceiling any candidate could reach; ranges span the three runs.

How the digest works

A raw agent trace is a large, unstructured set of calls. One user request fans out into dozens of spans (planner calls, tool calls, retries, sub-agents), each carrying prompts, payloads, and framework metadata. Here is one real request:

One request becomes dozens of nested spans that search can't reach.

Dashboards built on raw spans answer "what happened in this run." They can't answer the questions you actually ask when something feels off: which runs are about refunds, or which traces resemble one that broke. For those, each trace has to be reduced to something structured:

a summary, two or three factual sentences saying what the user asked and what the system did,
a topic, a short label like refund or data deletion,
a language tag, what language the conversation was actually in,
an embedding, the vector that makes semantic search and clustering work.

The digest is one structured LLM call per trace, plus an embedding of the summary. The call reads only what is already on the trace row (the user request, the step names, and the final answer, each bounded at write time). It never re-fetches the raw payload. That keeps the call small and its cost predictable, whatever the size of the original trace. The design is simple; three choices decide whether it holds up in production.

Make the output structured

Every digest returns a fixed schema (summary, language, topic) with the output language pinned: summaries and topics are always English, the dashboard's language, while the language field reports what the trace was actually in. Without pinning this, a Spanish support conversation gets a Spanish summary, and your clusters split by language rather than topic.

Big traces get cut

Bounded text means truncation, and we bound it rather than try to fix it. At ingest, each stored field (the user request, the final answer) is capped at 8,000 characters, and the assembled digest input at 12,000. The assembly order protects the trace's skeleton: the user request first, then the step names (so the model always sees which agents and tools ran), then the final answer. Because no single field can exceed 8,000 characters, even a maxed-out request leaves room for the steps and the start of the answer. What falls off first is the tail of a very long answer, so the answer itself stays intact, and the cut only affects what the summarizer reads: the stored answer stays on the trace, where search lands you anyway. What we do require is honesty about the cut. The model has to stay factual about the part it can see, and must not invent an ending for text that stops mid-sentence. For judgment-heavy work we run a cheap selection pass that picks the relevant steps of an oversized trace; the digest deliberately keeps the dumb-but-cheap cut instead, because at this volume a second LLM call to choose what to read would cost more than the digest itself. We made the cut an explicit test: our evaluation set includes traces built to overflow both caps, scored by a dedicated rule ("no inventing past the cut").

What the digest model sees on a big trace. The tail of a long answer is the first thing to fall off, and the rule that guards it is to stay factual about the visible part and never invent the ending.

Consistency is the hard part

The digest's job is to produce the same kind of summary every run, because everything downstream is built on it (trace to digest to embedding to search and clusters).

The embedding is computed from the summary text, so similar text lands at nearby points in vector space. If the digest describes a trace the same way every time, its embedding lands in the same place, and the same query keeps returning that same trace. The goal is that the same query returns the same results whether you run it today or next week, on this model's digests or a cheaper one's.

This kind of drift raises no error. If a summary shifts in style or focus between runs, its embedding moves with it, so search neighborhoods reshuffle and clusters relabel. The summary still reads fine even though the search results no longer hold. So reading the summaries is not enough. You have to run the search the digest feeds and check that the same query returns the same top traces on every run.

The model swap happens at the digest, but its effect only shows up at the thing that consumes it, so that is where you validate.

The experiment: the cheapest model that holds the bar

The digest is the highest-frequency LLM call we make, running once for every trace across every customer. Today it runs on Claude Sonnet 4.6, already a step down from the larger model we use for judgment-heavy work. The question is how much cheaper we can go before search results change.

Where the baseline stands today, measured over 150 metered calls:

Cost: $3.45 per 1,000 digests ($0.0035 per trace)
Latency: about 3 seconds per digest
Reliability: 99.3% valid structured output (149 of 150 calls)
Quality: judged against the source trace, and this is the reference. A pinned judge scores every digest, Sonnet's included, on seven trace-grounded rules; Sonnet's pass rates are the baseline each candidate is compared against.

Routing high-volume work to a smaller model is a well-known pattern. Verifying the swap takes four checks: that each digest is still accurate to its source trace, that the model still returns valid structured output on every call, that the consumer (search and clustering) still returns the same results, and a calibration for telling real regressions from run-to-run noise.

The setup

We ran the ladder in Glassray Coach, our local, open-source experiment harness, and the reports in this post are its output, unedited. A frozen set of 50 trace inputs, real traces plus synthesized ones covering 19 languages, code, SQL, multi-tool runs, crashed runs, steps-only traces, and three oversized traces that trip the truncation caps. Five models, three full runs each (750 digests total), all on the production code path with real metered cost per call. Each measurement uses the slice it needs: cost, latency, and reliability are aggregated over all three runs (150 calls per model). The search check (for each trace, do its nearest neighbors in embedding space stay the same as with the incumbent's digests) is reported as a range across the three runs, and the seven fixed quality rules are judged on the first run of each model (250 digests, one pinned judge so scoring never varies). The seven rules are the digest's own promises, lifted from its prompt and schema:

summary and topic always in English;
never invent details;
report the trace's real language;
say so plainly when the text is empty;
use plain everyday English (the one subjective style rule);
no inventing past the cut on truncated traces;
the summary is two to three sentences covering what was asked and what happened.

The ladder: four candidates, each measured head-to-head against the incumbent: Claude Haiku 4.5, gpt-4o-mini, Kimi K2.5 (via OpenRouter), and Gemini 2.5 Flash-Lite (via OpenRouter). Each comparison below is one of those match-ups: the candidate's digests of the 50 traces, scored rule by rule against Sonnet 4.6's digests of the same traces.

Why the rules, not just the summary

Reading the summaries and deciding they look fine is the obvious check, and it is the one that misses the most. A cheaper model's digest can read perfectly and still be wrong: it can state a detail the trace never held, tag a Spanish conversation as English, or shift its phrasing just enough to change which traces a search returns. None of that surfaces from the text alone. It surfaces when you hold the output against the rules the flow is supposed to follow.

Those rules are not written by hand for the experiment. Coach reads the digest flow's own code and prompt and pulls out the promises it makes, each one tagged with the file it came from.

Coach reads the digest flow and lists the rules it derived, each tied to the file it came from.

Each rule is one checkable promise, like "report the trace's real language" or "no inventing past the cut." Coach scores every run against all seven and quotes the evidence behind each pass or miss. So the reports below are not a judgment on whether the summaries look good; they are a per-rule comparison against the model we run today, on the same 50 traces.

Calibrating the noise band

Coach runs the judged side of the experiment (the seven rules, the pinned judge, the per-model comparisons) and meters cost, tokens, and latency on every call as the traces land. The search check is our own script over the stored digests, using the production embedding model. Before judging any candidate, we ran the incumbent against itself in Coach: same model, same 50 inputs, two independent runs, compared exactly like a candidate match-up. That Sonnet-vs-Sonnet run is the control, and its baseline is the first Sonnet run. Individual rules still shifted by a few points between identical runs, and that shift sets the noise band, plus or minus 4 points per rule, which everything below applies to: only drops beyond the band count as real regressions.

The control: Sonnet against itself on the same 50 traces. Its rules still move a few points between identical runs, and that spread is the plus-or-minus-4-point band every candidate is judged against.

Where each model held up, and where it broke

With the band in hand, start with the bottom line: what each model costs against how many of the seven rules it actually broke.

What each model costs against the rules it broke. gpt-4o-mini holds all but one rule at a thirtieth of Sonnet's price; the cheapest model, Gemini, broke four.

Price is a poor predictor here. The cheapest model on the sheet, Gemini, broke four rules; Kimi broke five at a higher price. Yet gpt-4o-mini holds all but one rule at a thirtieth of Sonnet's cost, and Haiku holds every one. A count of broken rules doesn't say which rule broke or by how much, so drop to the rule level, every delta against the same band:

Every rule's delta against the ±4-point band. Grey dots sit inside the noise floor; the red dots below it are the real regressions, and the three deepest are labeled.

Behind each table row is the full comparison: for every rule, how often each model kept the digest's promises on the same 50 traces (no invented details, honest about the cut, format held), plus tokens, cost, and latency on each side. The reports flag every negative delta; the table's verdicts apply the plus-or-minus-4-point band, which is why Haiku shows one flagged rule but counts as held.

The per-model specifics:

Haiku's one flagged dip ("never invent details," 96% to 92%) is two traces out of 50, the same amount the Sonnet-vs-Sonnet control moved on its own rules, so it stays inside the band; two of its other rules improved.
gpt-4o-mini's single real drop is the subjective style rule, 84% to 60%, its summaries reading a little stiffer. Whether that matters for a dashboard label is a product call.
Kimi prices cheap per token but writes about 727 output tokens per digest, ten times everyone else, which makes it more expensive than Haiku at 21 seconds a call.
Reliability split by hosting: the direct-API models returned valid JSON on effectively every call, while the two OpenRouter models did not (Gemini's invalid rate rose across its three runs, 4%, 6%, then 14%). In production, a failed call is a retry or a missing digest.

First, the two that passed:

Haiku 4.5 against Sonnet: six of seven rules held, and the one flagged dip sits inside the noise band.

gpt-4o-mini against Sonnet: two rules improve, two of the three flagged drops are within noise, and only the subjective style rule is a real regression, the model we shipped.

Now the two that failed:

Gemini 2.5 Flash-Lite: every rule regressed beyond the band, and it also returned unparseable JSON on a growing share of calls.

Kimi K2.5: one rule held, and it wrote roughly ten times the output tokens of the others, which made it slow and, per call, expensive.

Checking that search still works

A cheaper model whose summaries look fine can still degrade search: different phrasing shifts the embeddings and reshuffles the neighbors, with no error to warn you. This check proves that after the model swap, search over the digested corpus returns the same traces as before.

How the check is built. We reuse the digests from the ladder: same 50 traces, one set of summaries per model. Each summary gets embedded with the same embedding model our production search uses. Then, for every trace, we take its 3 closest neighbors in Sonnet's set and in the candidate's set, and check how much the two lists agree; if the neighbors change, search and clustering change too. Even two runs of the same model don't agree perfectly, so instead of comparing against a perfect 1.0, we compare against how well Sonnet agrees with itself (0.79-0.84).

The results. Haiku lands closest to the ceiling (0.62-0.63); gpt-4o-mini sits lower (0.51-0.55) with all its rules held. Its digests phrase things differently than Sonnet's while staying accurate, and the phrasing differences only surface when you search. As an end-to-end spot check, we ran one realistic query ("customer wants a refund or complains about billing") over the incumbent's corpus and the winner's, ranked by cosine similarity: 4 of 5 top results are identical, and the fifth is a relevant billing trace in both.

The same query over Sonnet's digests and gpt-4o-mini's. Four of the five top results are identical, and the fifth is a relevant billing trace in both.

Limitations

Under-specified inputs make judge pass rates look more decisive than they are: on a mixed English/Spanish trace, Sonnet says en, the candidates say es, and the judge passed all of them, because neither answer is wrong.
Subjective style rules are judge-sensitive: re-judging identical stored digests after an infrastructure change moved the style rule's verdicts by several points while the objective rules barely moved. Treat style rules as a signal rather than a hard gate.
These results are for our digest prompt and trace mix. The ladder and the method should carry over to other setups, though the exact numbers will differ.

What we're changing

A cheaper model can produce the digest well enough, so we are moving the digest to gpt-4o-mini. It held six of seven rules, all but the subjective style one (see limitations), and search still returns the same results. On cost, gpt-4o-mini runs 1,000 digests for $0.11 against Sonnet's $3.45, so at a million traces that is roughly $110 instead of $3,450, a saving of about $3,340, and at half the latency. Haiku 4.5 is the conservative runner-up if we ever want behavior closest to the incumbent.

The two models that looked cheapest on the price sheet both failed, one on quality and reliability, one by writing ten times the tokens. The price sheet doesn't know your workload, so validate on your own hot path (against whatever consumes the output) and calibrate by running your incumbent against itself.

Coach is open source, and there is a quickstart if you want to run this ladder against your own agent's hot path.

If you are building AI agents in production and want a better way to make sense of your traces, we would love to hear from you. Join the waitlist, or find us on X: Glassray, Manuel, Alex.

Best Bootstrap Template Builders

Toma Rares — Fri, 13 Sep 2024 06:23:49 +0000

In today’s fast-moving digital landscape, where speed and efficiency are key, web designers and developers are increasingly relying on Bootstrap builders to streamline their workflow. These tools enable the rapid creation of responsive, visually engaging websites, allowing teams to bring their ideas to life faster than ever.

Bootstrap builders have truly transformed the way websites are built, making the process more accessible and efficient. In this guide, we’ll dive into some of the best platforms available, whether you’re a beginner or a seasoned pro. Let’s help you discover the perfect Bootstrap builder for your next project!

1. Asteria Dashboard Builder from Loopple

The Asteria Dashboard Builder, built on Bootstrap 5, streamlines the transition from prototyping to functional code with pre-built examples and seamless development. Key features include:

Built on Bootstrap 5: Leveraging the most popular open-source toolkit for HTML, CSS, and JS.
Integrated Components: Includes buttons, cards, charts, and more to simplify dashboard creation.
In-Browser Text Editing: Easily edit content by double-clicking on any text directly in the browser.
Pre-Built Examples: Jumpstart your project with ready-to-use examples for quicker development.

🔗 Links:

2. Argon Dashboard Builder from Creative Tim

The Argon Dashboard Builder, based on Bootstrap 4, enables a smooth transition from prototyping to functional code with its pre-built examples. Key features include:

Built on Bootstrap 4: Developed with the most widely used open-source toolkit for HTML, CSS, and JS.
Integrated Components: Includes essential components like buttons, cards, and charts for easy dashboard creation.
In-Browser Text Editing: Effortlessly edit content by double-clicking on any text directly in the browser.
Pre-Built Examples: Simplifies the development process with ready-to-use examples for faster project completion.

🔗 Links:

3. Soft UI Design System Builder from Creative Tim

The Soft UI Design System Builder, built on Bootstrap 5, speeds up the development process from prototyping to full-functional code, featuring over 131 components. Key features include:

Built on Bootstrap 5: Powered by the most popular open-source toolkit for HTML, CSS, and JS.
Integrated Sections: Includes sections like navbars, headers, features, and testimonials for flexible website and landing page creation.
131+ Components: Offers a vast range of components to build any page you need.
In-Browser Text Editing: Easily update content by double-clicking on any text directly in the browser for a faster workflow.

🔗 Links:

4. Soft UI Dashboard from Creative Tim

The Soft UI Dashboard Builder, built on Bootstrap 5, simplifies the development process by providing pre-built examples and integrated components. Key features include:

Built on Bootstrap 5: Powered by the widely-used open-source toolkit for HTML, CSS, and JS.
Integrated Components: Includes essential components like buttons, cards, and charts to create dashboards quickly.
In-Browser Text Editing: Effortlessly update content by double-clicking on any text directly in the browser.
Pre-Built Examples: Enables a smooth transition from prototyping to live projects for faster development.

🔗 Links:

5. Material Dashboard Builder from Creative Tim

The Material Dashboard Builder offers a distinct design approach for building the UI of your application's backend. Key features include:

Material Design System by Creative Tim: Built using the popular Material Design principles for a sleek and modern look.
Pre-Formatted Sections: Includes pre-built sections to speed up dashboard creation.
Coded with Bootstrap: Ensures responsive and consistent code for all devices.
Responsive Design: Fully optimized for mobile, tablet, and desktop views.

🔗 Links:

6. Bootstrap builder from Designmodo

Take control of your landing page with a fast and simple solution to establish your online business presence. Use pre-designed blocks to quickly create a professional and visually appealing landing page, saving time and effort.

Try Designmodo Bootstrap builder here

7. Bootstrap builder from Pingendo

Design, build, and deploy web pages seamlessly with Pingendo. This modern tool combines the simplicity of stacking blocks with the power of a text editor, making it ideal for designers, developers, and web agencies to streamline their workflow and create stunning web pages effortlessly.

Try Pingendo Bootstrap builder here

How to Create a Next.js Template Using Low Code [Tutorial]

Toma Rares — Thu, 12 Sep 2024 06:54:51 +0000

How to Create a Next.js Template Using Low Code

Creating web applications quickly and efficiently is key for modern development. With the rise of low-code platforms, developers can now build robust Next.js applications with less effort, enabling faster time to market. In this article, we’ll walk through how you can use a low-code platform to build a Next.js template.

Is Next.js Hard to Learn?

While Next.js may have a learning curve due to its combination of React and advanced features like server-side rendering (SSR) and static site generation (SSG), it becomes easier when using low-code tools. These platforms simplify the process by allowing you to focus on customization rather than writing complex code from scratch.

In this tutorial, we’ll use Loopple, which offers a drag-and-drop interface for building Next.js templates. This makes the development process smoother and faster, while still giving you full control over the design and layout of your Next.js projects.

We’ll cover how to create a basic Next.js template with three main sections:

Home Page
About Page
Contact Page

How to Create a New Project
Creating the Home Page
Building the About Page
Adding a Contact Page
Download the template
Final Thoughts

How to Create a New Project

Once you have signed up and logged into Loopple, you can start by creating a new project. Here are the steps:

Select Tailwind CSS your project framework.
Choose Motion Landing Library template. This template supports exports to Next.js.
Give your project a name and click "Create".

Step 1: Creating the Home Page

The Home page is often the first impression users will have of your site, so we want to make it visually appealing and functional.

Add a Navbar:
- Customize the Navbar text by clicking it. For example, change "Brand" to your site’s name.
Add a Hero Section: Next, drag and drop a "Hero" section onto the page.
- Edit the placeholder text to match your product or service.
- Replace any default buttons with actions such as "Get Started" or "Learn More."
Modify the Content: Click on the text elements to update them with your own copy.
- Change generic headers to something relevant, like "Welcome to [Your App]" or "Start Building with Next.js."
Add an Image or Illustration: You can upload a placeholder image or use a stock photo to enhance the hero section.

Step 2: Creating the About Page

First step is to click on the "Page" tab located in the upper right corner. Select "Add Page" to create a new page. You can also duplicate the previous page so you can easily just customize its content with informations about your company.

The About page allows you to share more about your brand, mission, or product.

Add navbar and header: Same as the home page, add a navbar and a header. We recommend a light header as most of the info will be in the paeg content.
Add a Features Section: Drop a feature section to better describe your services.
- Edit the text to include different services that you provide.
Add a Team Section: You can choose between 7 different team sections provided by Motion Landing Library so you can easily see what fits your needs.

Step 3: Creating the Contact Page

Finally, let’s create the Contact page to enable users to reach out to you.

Add a Form: Choose a form component that includes fields like "Name", "Email", and "Message". You can customize these fields based on the type of inquiries you want to collect.
Modify Button Styles: Change the button style and text to suit your design, like “Send Message”.

Step 4: Download the template

After creating all the pages (Home, About, Contact), you can easily download your project as a Next.js template.

Click on the "Download" Button: Once your pages are finalized, click the "Download" button in the upper right corner of the workspace.
Select Next.js as the Export Format: Ensure that Next.js is selected as the output format.
Download the Files: The platform will bundle all your pages, components, and assets into a Next.js-ready project. This project will include everything you need to run your application locally or deploy it to a cloud platform.

Final Thoughts

Low-code platforms like Loopple provide a straightforward and intuitive way to build Next.js templates. By following these steps, you can create stunning and responsive Next.js websites without needing deep knowledge of React or server-side rendering.

Whether you’re building a landing page, a blog, or a full-fledged web application, the combination of Next.js and low-code makes the process both efficient and customizable.

Get started with your Next.js project today and bring your ideas to life faster than ever!

Helpful Links

Loopple Builder - Build responsive templates with ease using the drag-and-drop.
Loopple Motion Landing Library - Explore a collection of modern, customizable landing page components for your projects.

Best Tailwind CSS Template Builders

Toma Rares — Tue, 10 Sep 2024 05:32:55 +0000

In today's fast-paced world, where efficiency and speed are paramount in technology, web designers and developers are increasingly turning to Tailwind CSS template builders. These tools help them create stunning designs and complete projects much faster.

Indeed, Tailwind CSS template builders have revolutionized the web design industry. In this guide, we'll explore the top platforms that are perfect for both beginners and experienced developers. Let's find your ideal Tailwind CSS template builder!

1. Motion Landing Library Builder from Loopple

Motion Landing Library is a comprehensive design toolkit for Tailwind CSS, offering over 50 expertly crafted components to elevate your web projects. Whether you're building a sleek website or a dynamic web app, this versatile library is the perfect resource for creating captivating and responsive templates with ease, tailored to meet a wide range of design needs.

🔗 Links:

2. Riva Dashboard Builder from Loopple

The Riva Dashboard Tailwind Builder is designed to streamline your development process, transforming your prototypes into fully functional code with ease. Featuring a comprehensive set of pre-built examples, this dashboard allows for a smooth transition from concept to a live website.

Key Features of Riva Dashboard Tailwind Builder:

Based on Tailwind CSS: Built on the popular open-source toolkit, Riva Dashboard leverages the power of Tailwind CSS to deliver flexible and responsive design elements.
Integrated Components: Easily incorporate a variety of pre-designed components, such as buttons, cards, and charts, to quickly assemble your next dashboard page.

With Riva Dashboard Tailwind Builder, you save valuable time and ensure a seamless development experience from start to finish.

🔗 Links:

3. Soft UI Dashboard Builder from Creative Tim

Soft UI Dashboard Tailwind by Creative Tim is your go-to solution for crafting the UI of your application's backend with ease. Built on Tailwind CSS, this intuitive dashboard builder offers a streamlined approach to design with pre-formatted sections and responsive code.

Key Features:

Pre-Formatted Sections: Quickly assemble your backend UI with ready-made sections that are easy to customize and integrate.
Coded with Tailwind CSS: Benefit from the flexibility and power of Tailwind CSS to create a responsive and visually appealing dashboard.
Responsive Code: Ensure your dashboard looks great on all devices with code that adapts seamlessly to different screen sizes.

🔗 Links:

4. Tailwind Page Builder from Versoly

Versoly Tailwind Page Builder is Tailwind CSS visual developer with a code editor built-in for maximum flexibility and advanced component system for maintainability.

Try Versoly Tailwind Page Builder here

5. Chai Builder

Effortlessly create websites with Chai Builder, a Tailwind CSS Builder that streamlines web development for fast marketing page creation. Our platform features a desktop app, a UI blocks library, and an open-source builder for all.

Try Chai Builder here

6. Windframe

Windframe is an AI-enhanced Visual tailwind builder and editor for rapidly prototyping and building stunning webpages using tailwind css. Speed up your web development process and ship in minutes not weeks.

Try Windframe here

Free Tailwind CSS Button Animations

Toma Rares — Wed, 04 Sep 2024 06:49:56 +0000

Hi everyone,

These buttons were made using Riva Dashboard Tailwind CSS from Loopple.

Code:

<button class="bg-primary hover:bg-primaryActive text-white text-sm py-2.5 px-5 mr-2 mb-2 rounded-xl shadow-md hover:translate-y-[-2px] transition duration-300">
    Rise
</button>
<button class="bg-danger hover:bg-dangerActive text-white text-sm py-2.5 px-5 mr-2 mb-2 rounded-xl shadow-md hover:scale-105 transition duration-300">
    Scale
</button>
<button class="bg-success hover:bg-successActive text-white text-sm py-2.5 px-5 mr-2 mb-2 rounded-xl shadow-md hover:rotate-3 transition duration-300">
     Rotate to end
</button>
<button class="bg-warning hover:bg-warningActive text-white text-sm py-2.5 px-5 mr-2 mb-2 rounded-xl shadow-md hover:-rotate-3 transition duration-300">
     Rotate to start
</button>

You can also check the full list of components here: Riva Tailwind Dashboard Builder components

Thank you!

Riva - Tailwind CSS Dashboard Template Builder

Toma Rares — Tue, 03 Sep 2024 17:08:52 +0000

Hi everyone!

I would like to present you Riva Dashboard, a Drag & Drop Dashboard Template Builder for Tailwind CSS that aims to help developers to speed up their development process.

Riva is built on top of Tailwind CSS and has the following features 72+ components included (more coming soon).

Links:

Riva Dashboard Builder
Riva Landing Library Builder - Sections/Components
More Tailwind Builders
Loopple - Loopple website

Any feedback is really helpfull and highly appreciated!

Thank you!

Next.js Boilerplate Builder

Toma Rares — Fri, 24 May 2024 05:34:42 +0000

Hello everyone! 👋🏻

I am really happy to introduce Loopple Boilerplate Builder - a tool that will help you accelerate your development in just a matter of days.

Our powerful tool integrates the best technologies to streamline your development process:

Next.js for robust performance
Tailwind CSS for sleek designs
Paddle for hassle-free payments
Open AI for intelligent features
Supabase Auth & Database for seamless user management and data handling
Loopple Drag & Drop for effortless customization
7 pre-built pages examples

Whether you're a seasoned developer or just starting out, Loopple Boilerplate Builder helps you launch your projects in days, not weeks!

See how you can boost your development speed and build amazing web-based software with ease.

Also, we are giving a special limited 20% discount at Loopple Boilerplate Builder for Product Hunt friends! (use code at checkout: BOILERPLATE20)

Let us know what your thoughts are, your feedback is very valuable, as it helps us continuously improve our product. Thank you so much!

Below are some useful links if you want to contribute and give feedback ⬇️

📌 Website: https://www.loopple.com/boilerplate

📌 Documentation: https://boilerplate.loopple.com

Motion - Tailwind CSS Template Builder

Toma Rares — Tue, 12 Sep 2023 05:10:45 +0000

Hi everyone!

We recently launched a new theme to Loopple, a Drag & Drop Website Template Builder for Tailwind CSS that aims to help developers to speed up their development process.

Motion is built on top of Tailwind CSS and has the following features 50+ components included (more coming soon).

Links:

Motion Landing Library Builder
Motion Landing Library Builder - Sections/Components
More Tailwind Builders
Loopple - Loopple website

Any feedback is really helpfull and highly appreciated!

Thank you!

How to Create Tailwind CSS Dashboard Using Low Code [Tutorial]

Toma Rares — Wed, 05 Jul 2023 18:12:40 +0000

SaaS dashboards play a vital role in providing users with a visual representation of data. They enable you to monitor important metrics and make informed decisions. To create robust and user-friendly SaaS dashboards, it is important to use the right tools. This article explores the advantages of using Tailwind CSS and Low Code for building SaaS dashboards.

Is Tailwind CSS hard to learn?

Learning Tailwind CSS can be a bit challenging at first due to its extensive utility classes, but breaking it down into smaller components, practicing with hands-on projects, and utilizing the available documentation and online resources can make the learning process more manageable and enjoyable.

In this tutorial, we will use Loopple, which offers an intuitive drag-and-drop interface for building Bootstrap, Tailwind CSS or React dashboards effortlessly. Loopple simplifies the development process, allowing users to build dashboards faster and significantly reducing development time.

The Dashboard we build in this Tailwind CSS tutorial will have three pages:

Index

Profile

Orders

As we explore the implementation details of each interface in the following sections, these images will serve as a visual guide.

Table of contents:

How to Create New Project
- Creating the Index Page
- Create the Orders Page
- Create the Profile Page
Final Thoughts

How to Create New Project

Once you've signed in to your account by visiting the Loopple website, you'll be given the option to launch a new project.

You can use any of the options listed below to create a dashboard. However, in this tutorial, we'll focus on how to use the Soft UI Dashboard Tailwind CSS design.

Select it, give your project a name, and then click "Create."

Creating the Index Page

Let's go over step-by-step instructions for making the index page. Here is our blank template. As you can see it has three major sections. On the Left of the page, you have the sidebar. At the top, you can add a nav bar. There is a large area in the middle that include elements that will be shown when you navigate through different pages of the dashboard.

Step 1: Select a Sidebar

The following modal will open by clicking on the "+" button on the sidebar. As you can see, Loopple provides 2 sidebar types and users are free to use any sidebar they like. However, in this case, I'll go with the "sidebar simple" template. Once, I click it, all the elements in that template will be added to my sidebar.

Step 2: Select the Navbar

Next, we have to select the navbar. By clicking on the "+" button on the top, we can choose a model for the navbar.

In the navigation models, there are three choices. In this case, I have chosen the "navbar with the logo" option. You are free to use any of them depending on your preference.

Step 3: Modify the texts that are offered in the models.

To edit or rename a text, simply double-click on it. A box will then appear in the upper right corner of the screen. You can add any text you desire.

The Tailwind dashboard comes with elements that have prewritten text. Most of these texts won't work for your dashboard. For example, you may want to change the Software UI Dashboard to SaaS Dashboard or something like Your "product name" dashboard.

You can easily change the text of the elements by double-clicking on it. In my demo, I will change the test of these elements into the following:

Software UI Dashboard --> SaaS Dashboard
Navbar Brand --> SaaS Dashboard
Dashboard --> Dashboard
Table --> Analytics
Billing --> Invoice
Virtual Reality --> Messages
RTL --> Settings

Step 4: Change the Icon Color of “Analytics”

To accomplish this task, you need to select the border of the icon as we will be modifying its entire color. Afterward, you will notice the presence of an editor tab containing various labels. These labels describe the current design of the icon, and you have the ability to delete and add new styles. Here, I deleted the "From-purple-700" and "to-pink-500" labels and added "from-indigo-600" and "to-blue-600" to give the icon a blue color.

Step 5: Add a Card Section

To begin, let's position the card by adding a "grid" before incorporating it into our project. Next, navigate to the menu and select "Card section" under the "Sections" category. Once done, you can easily drag and drop a card design of your choice into the workspace. For this demonstration, I am using the first design option.
Now, to modify the colors of the icons, refer to "Step 4" and follow the instructions accordingly. In my case, I changed all the icons to a blue hue. Additionally, feel free to adjust the text as desired. In my dashboard, I made the following changes listed below.

Today's Money → Revenue
$ 53,00 → $ 5,400
Today's Users →Users
-2% → +5%
$103,430 → 970

Following these steps should result in the output shown below:

To modify the text color for "+5%", simply click on the "+5%" text. In the "classes" text input, add "text-lime-500" to apply a green color to the text and remove "text-red-600".

Step 6: Add a Grid

To add a grid, select "Grid with 2 columns" from the "Grid" by clicking the "Grid" tab, then drag and drop it onto an empty workspace. This grid will divide the workspace into two columns.

Step 7: Add Charts to the Grid

To incorporate charts, begin by selecting the "Charts" section from the component tab. You have the option to choose between two models. In my case, I opted for the "Chart Line" model and proceeded to drag and drop it into the left-hand column. Following that, I selected the "Chart Bar" model and placed it on the right side of the screen.

To make the text more relevant to your product, you can customize it accordingly. Here are the changes I made to the text:

📈 On the "Chart Line":

Sales Overview → Reports
4% more in 2021 → 4% more in 2023

📊 On the "Chart Bar":

Active users → Analytics
Users → Sales
Clicks → Distribute
Sales → Churn
Items → Return

Step 8: Adding Tables

Next, we need to divide the workspace into two columns, which can be done by following step 5. Once that is accomplished, we can proceed to add tables to the workspace.

To add tables, navigate to the "Components" tab and select "Tables". You will find a selection of available table templates displayed there. Currently, the "Table product" template is chosen and placed in the left-side column. Additionally, the title has been modified from "Top Selling Products" to "Recent Orders".

Furthermore, we include the "Table country" table template in the right-side column.

The creation process of the "Index.html" page is now finished. To save the file, simply click on the "Save" button located in the center of the screen. If you wish to preview your creation, you can click on the "Preview" button to see the result.

Create the Orders Page 📄

Step 1: Add a new page to create a new file.

Click on the "Page" tab located in the upper right corner. Select "Add Page" to create a new page.

Step 2: Copy the sidebar from the "Index" page.

We want to include the same sidebar on this page as well. Just like we did on the Index page, let's add a sidebar using templates. Now, click on the "Pages" tab and select "Index" to go back to "Index.html". Choose the sidebar and click on "Edit Code" in the "Sidenav" section.

The HTML code for the sidebar will then appear. You can copy it just like you would in everyday life by selecting everything with "Ctrl + A" and then press "Ctrl + C" to copy.

Return to "Page 2" (Orders.html) under "Pages". Select the sidebar you added earlier, then click on "EditCode" under "SideNav" on the right-hand side. Replace the existing code with the copied code from "Index.html".

Step 3: Add the Navbar

The instructions for the "Index" page's guide can be used for this as well. Select the Navbar template by clicking on the "+" sign, and then edit the left-side text to read "SaaS Dashboard".

Step 4: Rename the Page

Let's give the page a meaningful name. Select the "Pages" tab. Edit the file's name to "Orders" by clicking on "edit" in the "Page 2" section.

Step 5: Add and Edit typography

Typography allows us to create visually appealing text styles. We can start by adding a grid for the main title. Since we want the title to span the full width, choose "Grid with column 1".

Next, go to the "Component" section and select "Typography". Pick a design, such as "Typography H2", from the available options. Customize the typography's appearance, change the text to "View All Orders", and adjust the heading tag from h2 to h4.

If you wish to make the text bold, you can use the "<>" button to edit the HTML code and add the "font-bold" class in the "Classes" section under the "Editor" tab.

Step 6: Add a Table

To display tabular data, let's add a table. Click on the "Component" tab and choose the "Tables" section. Select a suitable table template, such as "Table Product" for this page. Customize the table's appearance, and don't forget to change the title to "Orders".

You have successfully created the "Orders.html" file. Don't forget to save your progress and take a moment to preview the page.

Let's go ahead and create the Profile Page following the below steps.

Create the Profile Page

Step 1: Add a New Page and Rename

Just like we did for the "Orders" page, let's add a new page. Click on "Pages" and then select "Add Page". A new page labeled "Page 2" will be created. Go ahead and rename it to "Profile".

Step 2: Add a sidebar and Navbar

To maintain consistency, we want the sidebar and navbar on this page to match the previous pages. Luckily, we can easily copy the code from the earlier pages. You can refer back to "Step 2" and "Step 3" under "Creating an Orders page" for the instructions on how to accomplish this.

Step 3: Add Profile Details

Let's focus on the "Profile" section under the "Grid" tab. Drag and drop the first item from the "Profile" section to the workspace. Now, you can make changes to its appearance. For example, let's change the CEO's name to "Michael Ordan".

Next, drag and drop the last item from the "Profile" section to the workspace. This section is also editable.

You have completed the "Profile" page. Before wrapping up, remember to save your progress and take a moment to preview the page.

As you've reached the end of this task, you can now preview all three pages. Simply choose one page at a time and see how they look.

Final Thoughts 💬

With the assistance of Loopple Tailwind CSS and Low Code, you can now design visually appealing dashboards more effectively. You have the ability to implement modern user interfaces, customize fonts, create unique icons, and incorporate charts, graphics, and cards to bring your dashboard to life.
By following the detailed step-by-step instructions provided for each template, you can confidently create remarkable Tailwind SaaS dashboards that will captivate your users and enhance your applications.
Get ready to unleash your creativity and elevate your dashboard designs to new heights! 🚀

You can also check our video tutorial for this article on our Youtube channel here: video.

Experience the power of low code by registering on the Loopple website and getting started with your own project today!

AI Color Palette Generator

Toma Rares — Sat, 08 Apr 2023 10:35:10 +0000

I just launched a simple color palette generator using AI. Simply input what kind of color scheme you're looking for, and AI will do the work for you.

Here are some fun inputs to try:
A color palette:

for a rainbow explosion
for 1980 party
for a cotton candy shop

Try it: https://www.loopple.com/color-palette-generator

I've made a Free drag and drop React Template Builder

Toma Rares — Tue, 14 Mar 2023 06:51:16 +0000

Hi,

I just launched reactbuilder.dev, a Free drag and drop react template builder. It currently works with ReactJS + Chakra UI but many more integrations and themes are coming soon.

You can check it here: reactbuilder.dev

Any feedback is really helpfull.

I made a drag & drop dashboard builder for React and Chakra UI

Toma Rares — Sat, 04 Mar 2023 17:37:46 +0000

Hi,

I recently launched the Beta version of the new React & Chakra UI Dashboard Builder for Loopple.

I am now looking for feedback to see what do you think about this, what do you like/don't like and what would you like me to add in the next versions that can ease your development work.

Chakra UI Dashboard Builder
React Homepage

Thank you!

DEV Community: Toma Rares

Trace digests for LLM monitoring, at 1/30th the price of Sonnet

Motivation

Results

How the digest works

Make the output structured

Big traces get cut

Consistency is the hard part

The experiment: the cheapest model that holds the bar

The setup

Why the rules, not just the summary

Calibrating the noise band

Where each model held up, and where it broke

Checking that search still works

Limitations

What we're changing

Best Bootstrap Template Builders

1. Asteria Dashboard Builder from Loopple

2. Argon Dashboard Builder from Creative Tim

3. Soft UI Design System Builder from Creative Tim

4. Soft UI Dashboard from Creative Tim

5. Material Dashboard Builder from Creative Tim

6. Bootstrap builder from Designmodo

7. Bootstrap builder from Pingendo

How to Create a Next.js Template Using Low Code [Tutorial]

How to Create a Next.js Template Using Low Code

Is Next.js Hard to Learn?

Table of Contents

How to Create a New Project

Step 1: Creating the Home Page

Step 2: Creating the About Page

Step 3: Creating the Contact Page

Step 4: Download the template

Final Thoughts

Helpful Links

Best Tailwind CSS Template Builders

1. Motion Landing Library Builder from Loopple

2. Riva Dashboard Builder from Loopple

3. Soft UI Dashboard Builder from Creative Tim

4. Tailwind Page Builder from Versoly

5. Chai Builder

6. Windframe

Free Tailwind CSS Button Animations

Riva - Tailwind CSS Dashboard Template Builder

Next.js Boilerplate Builder

Motion - Tailwind CSS Template Builder

How to Create Tailwind CSS Dashboard Using Low Code [Tutorial]

How to Create New Project

Creating the Index Page

Step 1: Select a Sidebar

Step 2: Select the Navbar

Step 3: Modify the texts that are offered in the models.

Step 4: Change the Icon Color of “Analytics”

Step 5: Add a Card Section

Step 6: Add a Grid

Step 7: Add Charts to the Grid

Step 8: Adding Tables

Create the Orders Page 📄

Step 1: Add a new page to create a new file.

Step 2: Copy the sidebar from the "Index" page.

Step 3: Add the Navbar

Step 4: Rename the Page

Step 5: Add and Edit typography

Step 6: Add a Table

Create the Profile Page

Step 1: Add a New Page and Rename

Step 2: Add a sidebar and Navbar

Step 3: Add Profile Details

Final Thoughts 💬

AI Color Palette Generator

I've made a Free drag and drop React Template Builder

I made a drag & drop dashboard builder for React and Chakra UI