Brice Vallieres

TinyPivot Update: Free Pivot Tables + Lifetime Pro Licensing

Mon, 23 Mar 2026 07:00:00 -0400

One of the hardest parts of selling developer tools isn’t building the thing. It’s explaining it clearly.

TinyPivot has reached that point where the product is broad enough that the old messaging was starting to blur the real value. So I spent some time tightening the story, and this is the version I want developers to see first:

TinyPivot gives you a lightweight data grid with free pivot tables for Vue 3 and React.

That means the free tier now clearly includes:

Grid view with sorting, filtering, search, export, and keyboard navigation
Pivot tables with Sum aggregation
Row and column totals
Calculated fields and formula builder

And Pro is now the upgrade path for the more advanced analytics layer:

Advanced aggregations like Count, Average, Min/Max, Median, Std Dev, and % of Total
Chart Builder
Embedded AI Analyst
Watermark removal

Why This Matters

When you land on a component site, you’re usually trying to answer one question fast:

“Can I drop this into my app today and get real value without a procurement process?”

If the answer is buried under too much pricing or too many “enterprise” caveats, most of us bounce.

TinyPivot was always meant to be the opposite of that. I wanted the free experience to be genuinely useful, especially for:

Internal tools
Admin dashboards
Reporting screens
Customer-facing analytics views

The goal is still the same: give you something that feels closer to Excel than a bare-bones table, without dragging a giant bundle into your app.

What The Free Tier Looks Like

If you’re using TinyPivot for the first time, here’s the basic setup in Vue 3:

<script setup lang="ts">
import { DataGrid } from '@smallwebco/tinypivot-vue'
import '@smallwebco/tinypivot-vue/style.css'

const data = [
  { region: 'North', product: 'Widget A', sales: 12500, units: 150 },
  { region: 'North', product: 'Widget B', sales: 8300, units: 95 },
  { region: 'South', product: 'Widget A', sales: 15200, units: 180 },
]
</script>

<template>
  <DataGrid
    :data="data"
    :show-pivot="true"
    :enable-search="true"
    :enable-export="true"
  />
</template>

And the same idea in React:

import { DataGrid } from '@smallwebco/tinypivot-react'
import '@smallwebco/tinypivot-react/style.css'

const data = [
  { region: 'North', product: 'Widget A', sales: 12500, units: 150 },
  { region: 'North', product: 'Widget B', sales: 8300, units: 95 },
  { region: 'South', product: 'Widget A', sales: 15200, units: 180 },
]

export default function App() {
  return (
    <DataGrid
      data={data}
      showPivot={true}
      enableSearch={true}
      enableExport={true}
    />
  )
}

No schema definition. No config file the size of a novella. Just your data, a component, and a pivot view that’s available from the start.

What Pro Is For

I still want a paid tier, but I want it to feel clean and justified.

So the Pro story is now much simpler:

Use Pro when you need richer analytics, not when you just need a pivot table.

That includes:

More aggregation modes
Drag-and-drop charts
Natural language data exploration with the Embedded AI Analyst
Watermark removal for shipped products

That separation feels healthier. The free tier is useful on its own. Pro is the serious upgrade for teams building more polished analytics experiences.

Lifetime Means Lifetime

The other cleanup was licensing language.

TinyPivot Pro is a lifetime license. Buy it once, activate it once, and keep using it. I wanted that to be obvious everywhere instead of sounding like there was some hidden annual catch.

I’m a solo builder. I like one-time pricing when I can make it work. It’s simpler for me, and it’s definitely simpler for the developers evaluating the library.

If You Already Tried TinyPivot

If you looked at TinyPivot a while ago and assumed pivot tables were part of the paid tier, take another look.

The free tier now tells the story I wanted it to tell from the beginning:

useful immediately
small enough to justify
powerful enough to grow with

You can try it at tiny-pivot.com, and if you want the full analytics stack, Pro is there when you need it.

# Vue 3
pnpm add @smallwebco/tinypivot-vue

# React
pnpm add @smallwebco/tinypivot-react

Questions, ideas, or feature requests? Reach out on GitHub or find me on X @bricevallieres.

Embedded AI Analyst: Drop a Chat Interface Into Your Data Grid

Sat, 03 Jan 2026 00:00:00 -0500

TinyPivot now includes an Embedded AI Analyst - natural language queries that generate SQL against your data. What makes it unique is the embedded part.

Most AI-powered data tools work like this: you leave your app, go to some external dashboard, paste in your data or connect a database, ask your question, then copy results back. It’s clunky. It breaks your flow.

TinyPivot’s AI Analyst is different. It’s a component you drop directly into your app.

The Split-Panel Experience

The Embedded AI Analyst uses a split-panel layout:

Left side (1/4 width): Conversational chat interface
Right side (3/4 width): Live data preview that updates with each query

Users type questions like “Show me sales by region” or “What’s our return rate by product category?” The AI generates SQL, executes it, and displays results immediately in the right panel. No page reloads, no context switching.

The magic is in the tight integration. When users find interesting data, they can click “View in Grid” to load those results directly into TinyPivot’s full data grid with pivot tables, charts, and all the features they’re already familiar with.

How It Works Under the Hood

The architecture is surprisingly simple:

Schema Discovery: When the component mounts, it introspects your data source (PostgreSQL tables or in-memory arrays) to understand column names and types.
System Prompt Engineering: The AI receives a carefully crafted prompt that includes your schema, SQL generation rules, and response formatting instructions. This is where most of the “intelligence” lives - teaching the LLM how to be a good data analyst.
SQL Generation & Validation: The AI generates SELECT queries. Before execution, TinyPivot validates them - blocking INSERT, UPDATE, DELETE, or any mutation statements.
Result Binding: Query results attach to the conversation message, so users can click any past message to see its associated data.

Here’s the validation logic that keeps your database safe:

// Only SELECT and WITH (for CTEs) are allowed
// Everything else is blocked: INSERT, UPDATE, DELETE, DROP, ALTER, etc.
function validateSQLSafety(sql: string): { valid: boolean; error?: string } {
  const normalized = sql.trim().toUpperCase()
  if (!normalized.startsWith('SELECT') && !normalized.startsWith('WITH')) {
    return { valid: false, error: 'Only SELECT queries are allowed' }
  }
  // Additional checks for multiple statements, etc.
  return { valid: true }
}

Three Deployment Modes

We designed the AI Analyst to fit different security and infrastructure requirements:

1. Full Server Mode

Your PostgreSQL database on the backend, AI proxied through your server. Best for production apps with existing databases.

2. Client-Side + AI Proxy

Data lives in the browser via DuckDB WASM. The AI only sees your schema, never your actual data. SQL executes entirely client-side. Perfect for apps with strict data privacy requirements.

3. Demo Mode

Canned responses and mock data. No API key required. Great for public demos or trials.

The BYOK Approach

I’m not interested in building another AI middleman that charges $0.10 per query. TinyPivot uses Bring Your Own Key (BYOK):

Drop in your OpenAI, Anthropic, or OpenRouter API key
Pay your provider directly at their rates
Switch models anytime via environment variable
No TinyPivot markup, no usage caps

The component auto-detects your provider from the key format:

Key Format	Provider	Default Model
`sk-...`	OpenAI	gpt-4o-mini
`sk-ant-...`	Anthropic	claude-3-haiku
`sk-or-...`	OpenRouter	anthropic/claude-3-haiku

Want better quality? Set AI_MODEL=claude-sonnet-4-20250514 and you’re done.

Integration

If you’re already using TinyPivot, adding the AI Analyst is straightforward:

<template>
  <AIAnalyst
    :ai-endpoint="'/api/tinypivot'"
    :data-sources="[
      { id: 'sales', table: 'sales', name: 'Sales Data' },
      { id: 'customers', table: 'customers', name: 'Customer Records' }
    ]"
  />
</template>

Or with client-side data:

<template>
  <AIAnalyst
    :ai-endpoint="'/api/tinypivot'"
    :data-sources="[{ id: 'local', name: 'My Data' }]"
    :data="myDataArray"
    :query-executor="runDuckDBQuery"
  />
</template>

The backend handler is equally simple:

import { createTinyPivotHandler } from '@smallwebco/tinypivot-server'

export default createTinyPivotHandler({
  aiApiKey: process.env.OPENAI_API_KEY,
  databaseUrl: process.env.DATABASE_URL,
  tables: {
    include: ['sales', 'customers', 'products'],
    exclude: ['_migrations', 'sessions']
  }
})

Security By Default

A few things we baked in:

SQL validation: Only SELECT/WITH statements execute
Table filtering: Control exactly which tables are exposed to the AI
Error sanitization: Database errors strip sensitive info (connection strings, IPs) before reaching the client
Schema-only prompts: In client-side mode, the AI never sees actual data values

What This Enables

The embedded approach opens up use cases that external AI tools can’t touch:

In-app analytics: Users explore data without leaving your product
Self-service BI: Business users ask questions without learning SQL
Customer-facing insights: Embed analytics in customer dashboards
Internal tools: Give your team a chat interface to production data

Try It

The Embedded AI Analyst is available now for TinyPivot Pro license holders. Check out the live demo or grab a license starting at $49 (one-time, lifetime access).

If you’re already a Pro user, update to the latest version and follow the AI Analyst setup guide.

Questions? Find me on X @bricevallieres or open an issue on GitHub.

Introducing Chart Builder: Data Visualization Comes to TinyPivot

Fri, 02 Jan 2026 08:50:00 -0500

When I built TinyPivot, the goal was simple: give developers a lightweight way to display, filter, and pivot their data without the bloat of enterprise solutions. Grid view for raw data exploration. Pivot view for aggregated insights.

But there was always a missing piece: visualization.

Today I’m excited to announce Chart Builder — a new view in TinyPivot Pro that lets you create beautiful, interactive charts from your data with drag-and-drop simplicity.

The Third View

TinyPivot now has three ways to look at your data:

Grid — Your classic Excel-like data table with sorting, filtering, and cell selection
Pivot — Drag-and-drop pivot tables with aggregations and totals
Chart — A visual chart builder with 6 chart types

Each view shares the same filtered dataset. Apply a filter in Grid view, and your Pivot and Chart views automatically reflect that subset. No configuration gymnastics needed.

6 Chart Types

Chart Builder supports the visualizations you actually need:

Chart Type	Best For
Bar	Comparing categories, rankings
Line	Trends over time, continuous data
Area	Volume trends, stacked comparisons
Pie	Part-to-whole proportions (2-6 categories)
Donut	Proportions with a center metric
Radar	Multi-metric comparison, balanced scorecards

Drag-and-Drop Configuration

Building a chart is intuitive:

Select a chart type from the type bar
Drag a dimension (like “Region” or “Month”) to the X-axis
Drag a measure (like “Revenue” or “Units”) to the Y-axis
Optionally add a series field for grouped/stacked charts

TinyPivot automatically detects which fields are dimensions (text, dates) and which are measures (numbers). No configuration needed — just drag and drop.

Smart Aggregations

When you drop a measure on the Y-axis, you can choose how to aggregate:

SUM — Total of all values
COUNT — Number of records
AVG — Average value
MIN / MAX — Extremes
DISTINCT — Count of unique values

Click the aggregation badge to change it. Your chart updates instantly.

Respects Your Filters

Here’s what I love about this implementation: Chart Builder uses your Grid filters.

Filter your data grid to show only “North America” sales? Your chart automatically shows only North American data. Clear the filter? The chart shows everything again.

This means you can:

Explore raw data in Grid view
Apply filters to narrow down the dataset
Switch to Chart view to visualize the filtered subset
Switch to Pivot for aggregated cross-tabs

All three views stay in sync. No copy-pasting data into a separate charting tool.

Dark Mode Support

Like the rest of TinyPivot, Chart Builder respects your theme setting. Light mode, dark mode, or auto-detect — charts render beautifully either way.

Bundle Size

You might be thinking: “Charts usually mean a huge dependency.”

TinyPivot uses ApexCharts under the hood, which adds about 150KB to the bundle. But here’s the thing — Chart Builder is only loaded when you use the Pro features. The core TinyPivot library stays under 40KB gzipped for free-tier users.

Try It Out

Chart Builder is available now in TinyPivot Pro. Head to tiny-pivot.com to try the demo — click the “Chart” button in the view toggle.

If you’re already a Pro license holder, just update to the latest version:

# Vue
pnpm update @smallwebco/tinypivot-vue

# React  
pnpm update @smallwebco/tinypivot-react

What’s Next?

This is just the beginning for data visualization in TinyPivot. On the roadmap:

Chart export (PNG, SVG)
More customization options (axis labels, colors, legends)
Chart configuration persistence (save/load your setups)
Additional chart types based on feedback

Have a chart type you’d love to see? Let me know on GitHub or reach out on Twitter @bricevallieres.

TinyPivot is a lightweight pivot table and chart builder for React and Vue 3. Get a Pro license starting at $49 — one-time payment, perpetual license.

Vue 3 & React Pivot Table Tutorial: Build Data Dashboards with TinyPivot

Wed, 03 Dec 2025 05:00:00 -0500

Last week someone asked me “what can TinyPivot actually do?” - and I realized I’d been so focused on building features that I hadn’t written a proper guide on how to use them. So here’s the practical stuff: real scenarios, actual code, and the patterns I’ve found myself using repeatedly.

Whether you’re looking for a lightweight Vue 3 pivot table or a React data grid component, this tutorial covers everything from basic setup to advanced pivot table configurations.

If you haven’t already, check out the intro post on why I built TinyPivot for the backstory and motivation.

Try It Now

Before we dive into code, here’s the actual component in action. Click around, filter some columns, try Cmd+C to copy cells:

The Basics: Vue 3 Data Grid Setup

Let’s start with the most common case. You have an array of objects and you need to display them in a grid. No fancy config - just data in, table out. This lightweight approach means no complex schemas or configuration objects.

<script setup lang="ts">
import { DataGrid } from '@smallwebco/tinypivot-vue'
import '@smallwebco/tinypivot-vue/style.css'

// Your API response, CSV import, whatever
const orders = ref([
  { orderId: 'ORD-001', customer: 'Acme Corp', amount: 2340, status: 'shipped' },
  { orderId: 'ORD-002', customer: 'TechStart', amount: 890, status: 'pending' },
  { orderId: 'ORD-003', customer: 'Acme Corp', amount: 1200, status: 'delivered' },
])
</script>

<template>
  <DataGrid :data="orders" />
</template>

That’s it. TinyPivot infers the columns from your data keys. Numbers get formatted with commas automatically. Strings display as-is. No schema definition required.

Scenario 1: Sales Dashboard with Filtering

Most dashboards need filtering. Users want to slice data by region, by product, by date range. Here’s a sales dashboard setup:

<script setup lang="ts">
import { ref } from 'vue'
import { DataGrid } from '@smallwebco/tinypivot-vue'

const salesData = ref([
  { date: '2025-01-15', region: 'Northeast', rep: 'Alice', product: 'Enterprise', amount: 45000 },
  { date: '2025-01-16', region: 'Southwest', rep: 'Bob', product: 'Starter', amount: 1200 },
  { date: '2025-01-16', region: 'Northeast', rep: 'Alice', product: 'Pro', amount: 8500 },
  { date: '2025-01-17', region: 'Midwest', rep: 'Carol', product: 'Enterprise', amount: 52000 },
  // ... more data
])
</script>

<template>
  <DataGrid
    :data="salesData"
    :enable-search="true"
    :enable-export="true"
    export-filename="sales-report.csv"
    theme="light"
  />
</template>

The column headers become clickable filters. Users can:

Click any column header to filter by specific values
Use the global search (Cmd+F) to find specific records
Export the filtered view to CSV

Scenario 2: React Data Grid with Large Datasets

When you’re dealing with 10K+ rows, pagination keeps things snappy. Here’s how to set up a lightweight React pivot table that handles large datasets efficiently:

// React data grid example
import { DataGrid } from '@smallwebco/tinypivot-react'
import '@smallwebco/tinypivot-react/style.css'

export function TransactionLog({ transactions }) {
  return (
    <DataGrid
      data={transactions}
      enablePagination={true}
      pageSize={100}
      enableSearch={true}
      fontSize="xs"
    />
  )
}

The fontSize prop is worth mentioning - when you’re showing dense data like transaction logs or server metrics, xs lets you fit more on screen without scrolling.

Scenario 3: Interactive Row Selection

Need to do something when a user clicks a row? Wire up the cell-click event:

<script setup lang="ts">
import { DataGrid } from '@smallwebco/tinypivot-vue'

const customers = ref([
  { id: 1, name: 'Acme Corp', tier: 'Enterprise', mrr: 12500 },
  { id: 2, name: 'TechStart', tier: 'Starter', mrr: 49 },
  { id: 3, name: 'BigCo', tier: 'Pro', mrr: 499 },
])

const selectedCustomer = ref(null)

function handleCellClick({ rowData }) {
  selectedCustomer.value = rowData
  // Open detail panel, navigate to customer page, whatever you need
}
</script>

<template>
  <div class="flex gap-4">
    <DataGrid
      :data="customers"
      @cell-click="handleCellClick"
      class="flex-1"
    />
    <CustomerDetail 
      v-if="selectedCustomer" 
      :customer="selectedCustomer" 
    />
  </div>
</template>

The rowData gives you the entire object for that row - no need to track indices or do lookups.

Scenario 4: Copying Data to Clipboard

One of those “small but huge” features. Select a range of cells, hit Cmd+C, paste into Excel or Google Sheets. It just works.

<template>
  <DataGrid
    :data="data"
    :enable-clipboard="true"
    @copy="({ text, cellCount }) => console.log(`Copied ${cellCount} cells`)"
  />
</template>

Users can:

Click and drag to select a range
Shift+Arrow keys to extend selection
Cmd+C to copy
Paste anywhere that accepts tabular data

This is the kind of thing finance teams love. They can pull a subset of data into their own spreadsheets without exporting the whole thing.

Scenario 5: Vue 3 Pivot Table with Drag-and-Drop

This is where TinyPivot really shines as a Vue 3 pivot table component. Say you have sales data and want to analyze it by region and product:

<script setup lang="ts">
import { ref } from 'vue'
import { DataGrid } from '@smallwebco/tinypivot-vue'

const salesData = ref([
  { region: 'North', product: 'Widget A', quarter: 'Q1', revenue: 45000, units: 150 },
  { region: 'North', product: 'Widget B', quarter: 'Q1', revenue: 32000, units: 95 },
  { region: 'South', product: 'Widget A', quarter: 'Q1', revenue: 52000, units: 180 },
  { region: 'South', product: 'Widget B', quarter: 'Q1', revenue: 28000, units: 85 },
  { region: 'North', product: 'Widget A', quarter: 'Q2', revenue: 48000, units: 160 },
  // ... more quarters
])
</script>

<template>
  <DataGrid
    :data="salesData"
    :show-pivot="true"
  />
</template>

TinyPivot includes pivot mode in the free tier, so users can drag fields into row/column slots and get instant Sum-based aggregations. Want to see total revenue by region? Drag region to rows and revenue to values. Want to break it down by quarter? Drag quarter to columns.

In the free tier, you get:

Sum - total of all values
Row/column totals - quick rollups without extra setup
Calculated fields - create derived metrics from your existing columns

If you upgrade to Pro, TinyPivot adds the fuller analytics layer:

Count / Average / Min / Max
Median / Std Dev
% of Total
Chart Builder
Embedded AI Analyst

Scenario 6: Custom Aggregations

Sometimes the built-in aggregations aren’t enough. Need a 90th percentile? Weighted average? Pass your own function:

<script setup lang="ts">
const valueFields = ref([
  {
    field: 'response_time',
    aggregation: 'custom',
    customFn: (values) => {
      // P95 latency
      const sorted = [...values].sort((a, b) => a - b)
      const idx = Math.floor(sorted.length * 0.95)
      return sorted[idx]
    },
    customLabel: 'P95 Latency',
    customSymbol: 'P95'
  }
])
</script>

I’ve used this for:

Calculating weighted averages (value * weight / sum of weights)
Finding mode (most common value) in categorical data
Computing growth rates between first and last values
Custom percentile calculations for SLA reporting

Scenario 7: Calculated Fields

Want derived metrics that don’t exist in your raw data? Calculated fields let you build formulas:

<script setup lang="ts">
const calculatedFields = ref([
  {
    id: 'profit_margin',
    name: 'Profit Margin %',
    formula: '(SUM(revenue) - SUM(cost)) / SUM(revenue) * 100',
    formatAs: 'percent',
    decimals: 1
  },
  {
    id: 'avg_order_value',
    name: 'Avg Order Value',
    formula: 'SUM(revenue) / COUNT(order_id)',
    formatAs: 'currency',
    decimals: 2
  },
  {
    id: 'units_per_transaction',
    name: 'Units/Transaction',
    formula: 'SUM(units) / COUNT(order_id)',
    formatAs: 'number',
    decimals: 1
  }
])
</script>

These calculated fields update dynamically as users filter and pivot the data. Great for KPIs that leadership actually cares about.

Scenario 8: Dark Mode

If your app has dark mode, TinyPivot should match:

<template>
  <DataGrid
    :data="data"
    :theme="isDark ? 'dark' : 'light'"
  />
</template>

Or let it follow the system preference:

<template>
  <DataGrid :data="data" theme="auto" />
</template>

Scenario 9: Custom Styling

Need to match your brand colors? Override the CSS variables:

/* In your app's CSS */
.vpg-data-grid {
  --vpg-header-bg: #1a1a2e;
  --vpg-header-text: #eef2ff;
  --vpg-row-hover: #f0f9ff;
  --vpg-border-color: #e5e7eb;
  --vpg-selection-bg: #dbeafe;
}

The component uses scoped styles so you won’t have conflicts with existing CSS.

Keyboard Shortcuts Reference

For power users who hate reaching for the mouse:

Shortcut	What it does
`Cmd/Ctrl+C`	Copy selected cells
`Cmd/Ctrl+F`	Focus search input
`Arrow keys`	Navigate between cells
`Shift+Arrow`	Extend selection
`Escape`	Clear selection or search

What Data Shape Works Best

TinyPivot expects flat objects. Each object is a row, each key becomes a column:

// ✅ This works great
const data = [
  { id: 1, customer: 'Acme', revenue: 50000, region: 'West' },
  { id: 2, customer: 'TechCo', revenue: 35000, region: 'East' },
]

// ❌ Nested objects won't display correctly
const badData = [
  { id: 1, customer: { name: 'Acme', tier: 'Enterprise' }, metrics: { revenue: 50000 } }
]

If you have nested data from an API, flatten it first. A quick map usually does the trick:

const flatData = apiResponse.map(item => ({
  id: item.id,
  customerName: item.customer.name,
  customerTier: item.customer.tier,
  revenue: item.metrics.revenue
}))

Wrapping Up

The patterns above cover probably 90% of what I’ve needed across various projects. Whether you need a lightweight Vue 3 data grid, a React pivot table component, or something that handles both - TinyPivot keeps things simple without sacrificing features.

The core idea is: get data on screen fast, let users explore it, and don’t make them wait for the backend when they want to filter or aggregate. And do it all with a tiny bundle size.

Full docs and live demo at tiny-pivot.com. The npm packages are @smallwebco/tinypivot-vue for Vue 3 and @smallwebco/tinypivot-react for React.

Questions or feedback? Find me on X @bricevallieres or open an issue on GitHub.

TinyPivot: A Lightweight Pivot Table Component for Vue 3 & React

Mon, 01 Dec 2025 08:57:19 -0500

If you’ve ever built a data-heavy dashboard in Vue 3 or React, you know the pain. You need to display tabular data, let users sort and filter, maybe even do some aggregations. You reach for a data table library and… it’s either way too heavy, looks like it was designed in 2012, or requires a PhD to configure.

I’ve been there more times than I’d like to admit.

After years of wrestling with various table components across client projects - at consultancies, on my own apps like Staff Mapper - I realized something: there wasn’t a lightweight, beautiful, Excel-like data grid for Vue 3 or React that just worked out of the box. Sure, there were enterprise behemoths that cost thousands per year and added 500KB to your bundle. And there were bare-bones tables that looked… bare-bones. Nothing in between.

So I built TinyPivot - a lightweight pivot table component that doesn’t sacrifice features for simplicity.

What Is It?

TinyPivot is a lightweight Vue 3 and React pivot table component that gives you:

An Excel-like data grid with auto-sizing columns
Column filtering with multi-select dropdowns
Sorting (just click the headers)
Keyboard navigation and cell selection
Copy to clipboard (Cmd+C like you’d expect)

TinyPivot now includes free drag-and-drop pivot tables with Sum aggregation, totals, and calculated fields. Pro is where the more advanced analytics live: richer aggregations, charts, embedded AI, and watermark removal.

The Problem I Was Solving

Here’s the thing - I kept running into the same pattern on client projects. Someone would say “we just need a simple table to show this data.” Two weeks later, it’s “can we add filtering?” Then “can users pivot the data by region?” Then “can we export this to Excel?”

Every. Single. Time.

What starts as a simple <table> element inevitably becomes a feature-creep nightmare. I wanted something that could handle the basics beautifully out of the gate, but scale up into richer analytics territory when the inevitable ask came.

Dead Simple to Use

Here’s all you need to get started with Vue 3:

<script setup lang="ts">
import { DataGrid } from '@smallwebco/tinypivot-vue'
import '@smallwebco/tinypivot-vue/style.css'

const data = [
  { region: 'North', product: 'Widget A', sales: 12500 },
  { region: 'North', product: 'Widget B', sales: 8300 },
  { region: 'South', product: 'Widget A', sales: 15200 },
]
</script>

<template>
  <DataGrid :data="data" />
</template>

Or with React:

import { DataGrid } from '@smallwebco/tinypivot-react'
import '@smallwebco/tinypivot-react/style.css'

const data = [
  { region: 'North', product: 'Widget A', sales: 12500 },
  { region: 'North', product: 'Widget B', sales: 8300 },
  { region: 'South', product: 'Widget A', sales: 15200 },
]

export default function App() {
  return <DataGrid data={data} />
}

That’s it. No config objects, no schema definitions, no boilerplate. Just pass your data and it figures out the columns.

The Freemium Model

I went back and forth on pricing for a while. Ultimately, I landed on a freemium approach:

Free tier gets you the data grid with filtering, sorting, export, and free pivot tables with Sum aggregation, totals, and calculated fields. It’s genuinely useful.

Pro licenses ($49 for a single project, $149 unlimited) unlock advanced aggregations, charts, embedded AI, and remove the small “Powered by TinyPivot” badge.

Why this model? Because I’ve been burned by libraries that bait-and-switch. You integrate them, ship to production, and then realize you need a feature that’s locked behind a $5K/year enterprise plan. Not cool.

With TinyPivot, you can evaluate everything in demo mode before buying. And if the free tier does what you need, use it forever. I’d rather have devs actually using it than hiding the useful parts behind a paywall nobody can afford.

What’s Next

I’m actively working on a few things:

Virtual scrolling for massive datasets (100K+ rows)
Column resizing via drag handles
Export to CSV/Excel (the inevitable ask, might as well build it in)
Nuxt module for easier SSR integration
Next.js optimizations for React SSR

If you’re building dashboards in Vue 3 or React and need a lightweight data grid that doesn’t suck, give TinyPivot a shot. Zero dependencies, tiny bundle size, and it actually looks good. It’s on npm:

# Vue 3
pnpm add @smallwebco/tinypivot-vue

# React
pnpm add @smallwebco/tinypivot-react

I’d love to hear what you think. Drop me a line on X @bricevallieres or open an issue on GitHub.

Next up: Check out the Vue 3 & React Pivot Table Tutorial for practical examples and real-world use cases.

🚀 Happy pivoting 🚀

Hosting a private LLM in the cloud

Mon, 15 Apr 2024 09:57:19 -0400

Last week I wrote a post on X about hosting a private LLM for a client, and it unexpectedly blew up. If I had to guess, there’s a ton of demand for being able to securely interact with LLMs. I also think there’s a lot of curiousity around how these private LLMs, using open source models, can be integrated into current applications or workflows. The primary technology I leveraged was Ollama and it’s a wonderful app for running local LLMs, like Llama and Mixtral. It works really well. There are of course concerns, about running in production and the ability for it to run concurrent requests - I don’t think it’s there yet, but eventually, someone will get there.

For those who are curious, here is the post on X:

A client asked me yesterday if we could run a privately hosted LLM to avoid data privacy issues. Today I implemented @ollama on an AWS g5 EC2 instance and it's currently hooked up to Staff Mapper. Couple of thoughts on connecting this service to your web app... pic.twitter.com/QFtkNGWGMT
— Brice Vallieres (@bricevallieres) April 12, 2024

Now, before we get through the “How-To”, here’s the general setup (assumes you have an active AWS account):

At the time of writing, I’m running a g5.2xlarge Deep Learning OSS Nvidia Driver AMI GPU PyTorch 2.2.0 (Amazon Linux 2) 20240410 machine on AWS. It has 8vCPU and 32GB of memory. This is probably more than you need at ~$870/month. You can also try a g4dn.xlarge model with 4vCPU and 16GB of memory for half the price, I think you’d be able to run the smaller models on this without an issue. I’m using 100GB of storage for this proof-of-concept. Make sure to store your .pem key when you set this up so we can SSH into it later. I typically just have one SSH key I use for all my instances.

Once you launch the instance in AWS, we’re gonna have to do some setup. Luckily, the instances are pre-configured with GPU acceleration, so the inference will be faster than running traditional CPU instances (benchmarking to be created in another post).

As soon as the server is spun up, I change the permission on my key via:

chmod 400 ssh_key.pem

I then SSH into my instance:

ssh -i ssh_key.pem ec2-user@ec2-XX-XXX-XX-XX.compute-1.amazonaws.com

Then I install docker services:

sudo yum update -y
sudo yum install docker
sudo usermod -a -G docker ec2-user
sudo systemctl enable docker.service
sudo systemctl start docker.service
sudo systemctl status docker.service

Then I install Ollama:

curl -fsSL https://ollama.com/install.sh | sh

Check Ollama status:

sudo systemctl status ollama

Ollama makes it dead easy to download a model. I’m running mistral because it’s a smaller 7B model and it’s pretty fast. I’ve also listed others you can download and run. As a word-of-caution, I beleive Ollama can context switch between models when the request is made, but it takes time perform the switch and load the model:

ollama run mistral
ollama run llama2
ollama run mixtral

Finally, we need a way to expose the Ollama service via Nginx:

sudo amazon-linux-extras install nginx1=latest

It’s possible, nginx has a different version, so you may need to search for it if the command above fails. Find the version you have on your system and re-run above:

sudo amazon-linux-extras

Now, we need to configure Nginx. This is the setup that worked for me. The default port that Ollama runs on is 11434. We are esentially proxying that so we can run on port 80 and expose the service to the public / web - this should make the API endpoints for Ollama available. Eventually I will configure this to only serve via HTTPS / SSL via port 443. Will update this post, when I do (need to generate a certificate on Cloudflare, and configure the Nginx here):

sudo nano /etc/nginx/conf.d/myapp.conf

Paste below and switch out the public server name. If you haven’t used Nano before, it’s just a text editor on your terminal. I just ctrl+v, ctrl+x and save.

server {
listen 80;
server_name ec2-XX-XXX-XX-XX.compute-1.amazonaws.com;

    location / {
        proxy_pass http://127.0.0.1:11434;
        proxy_set_header Host $host;
    }

}

Restart the Nginx server:

sudo systemctl restart nginx

Now start the Ollama service:

docker run -d -p 3000:8080 -e OLLAMA_API_BASE_URL=http://ec2-XX-XXX-XX-XX.compute-1.amazonaws.com/api -v open-webui:/app/backend/data --name open-webui --restart always ghcr.io/open-webui/open-webui:main

I’m not using the webui for Ollama just the API endpoint, so haven’t configured that yet.

One last thing you may want to do is enable an Nginx restart on server reboot. I don’t want to run the server full-time right now because it’s just a POC until I get Staff Mapper v2 up and running in prod. Also need to think through pricing for end client to accomodate switches from open source LLMs hosted privately, vs commerical LLMs. To run your Nginx restart on system reboots:

systemctl edit nginx

And then copy paste:

[Service]
Restart=always

One other point to make, is that I’ve restricted access to this LLM - it’s only available to my IP address at the moment. Eventually, I’ll get the cert up and I have it pointed to my actual app IP and voila - my SaaS app will be connected to a secure privately-hosted LLM. Once Ollama evolves and grows, this setup will be amazing. There were several suggestions in the comments to check out vLLM, which I’ll review as well. Just love the simplicity of Ollama.

Again, not saying this is production ready but certainly presents a ton of oppurtunities to roll-your-own LLM.

For those of you interested in how I created the UX interface for allowing customers to choose between open vs closed LLMs, comment below and follow and I’ll show you how I handled! Benchmarks incoming too.

Evolving Staff Mapper - Reaching ~$700/month

Fri, 31 Jan 2020 08:57:19 -0500

Fast forward a year later and a lot has changed. The good news: we still have our primary client using the system. They are happy and continue to request customizations that have made the software even more powerful for their firm. In the last year we have:

Integrated with the time-entry system (Bigtime)
Synced their staff with Bigtime and increased revenue to ~$700/month
Built out a fully-functional performance management system, that allows them to conduct reviews 2x a year. More on this later.
An attrition module to analyze how long staff are in a given position in average
Time compliance reports which help them corral time entry submissions, improving revenue cycles (beta)
Dynamic manager assignment based on an intensity ratio - the number of shared hours each staff member has with a managing member of the practice
Bonus module which automatically calculates bonus based on utilization figures, staff level and partner contributions to individual bonuses
Lifetime promotion tracking, which also feeds into the attrition module to look at career progression of staff
Better controls for HR staff as a central manager of the system

So these are all great things. Our client is happy as we’ve been able to expedite their year-end review process, building in notifications to staff to input their mid-year and year-end reviews and just generally keeping all year-end review information in one place for each staff. Using the intensity ratios, we can assign staff to each manager who is responsible for thier reviews. They can of course, be shuffled to other managers using a trello-like board. I’d estimate it’s saved each partner a week of time each review cycle. When you have partner’s billing clients $500+ dollars an hour, the savings / ROI is clear.

The system has also become a repository for these reviews, with the HR manager / staff able to go back in time to see previous year-end reviews. Imagine being able to print your reviews and taking them with you to your next employer. Opening this up for staff is great way to provide career continuity and a footprint for what’s been accomplished.

You’re probably thinking - how the hell can you do this all for $700/month? Well, that’s where our customization clause comes in - for general purpose updates we do not charge. That’s a change that we think will apply to other customers. For things that are specific to our customer (e.g. like calculations of specific bonus criteria or compliance with a specific policy), we charge by the hour. That allows us to keep up with their demands, sharing the load for development cost, and allowing Staff Mapper to continue to serve their resource management needs in a unique way.

Our core philopshy here is that each firm deserves a custom approach to resource management because people management is unique to each firm and tools that help these firms should reflect their management style. Our goal is to make firms more internally transparent and to increase communication potential and to provide tools that make everyone’s jobs easier.

This year we will be focused on streamlining the customization of our product so that each firm can have a unique experience on our platform, while continuing to serve our current clients with the quality they expect from us as their organization grows.

I’ll continue to write about this approach - writing custom software for clients presents a couple of challenges. For instance, how do you scale custom code? The short answer, is it’s really hard. Almost no one does it outside of a platform-as-a-service like Salesforce.

At one point we had a conversation with an investor who told us to avoid it all costs. But that wouldn’t be the right move for our current client. He’s not wrong but we need to find a way to accomodate our current clients while keeping our growth prospects strong, which means, more easily scaling. I’d consider our scope of work to be more aligned to “Productized Services”, rather than a pure SAAS play. And I’m ok with that for the moment - we have a paying customer and we want to do anything we can to make them happy. Disagree? Leave a comment.

Staff Mapper Product Market Fit

Thu, 30 Jan 2020 08:57:19 -0500

Even before I had a true MVP in place, I started reaching out to customers. I felt that waiting too long to reach out and get immediate feedback on product direction from potential customers would be a mistake. With my other product (WorkDive), I did the opposite and learned from it. I simply built the product, pretending that the universe needed it. Looking back, there were well-established products in the time entry space and although I learned from the process, I was building a product that no one really needed at the end of the day. Sure, I had a differentiating angle with SMS time entry, but at the end of the day it would be a dog fight to get users to switch their time entry system to something nascent like WorkDive. It would have been a tough battle and I knew I should move on.

Product development on Staff Mapper started in July of 2017, and interestingly my first email outreach to my professional network about the product also began around that time. While I had just the beginnings of an actual product, I knew that I wanted my customers to drive the product development roadmap, so I started talking to dozens of consultancies, hoping to achieve 1) understanding of needs 2) and early customers.

I spoke with mostly professional service firms, consultancies and other firms who relied on labor as a means to revenue. This was the hardest part of the product development process in my opinon. I had many ideas about what the product was and what I thought it should be. After talking with so many people, I realized that people managemnt is hard - the needs are so diversified and unique.

Here are some things I heard while pitching the product:

“I’d prefer something we can visualize and manipulate in salesforce. I don’t want a stand alone tool, I want to use the tools we have now.” – CEO of a Salesforce consulting company

“Our staff are organized by several small agile teams, so there’s no need” – Manager at a Fair Market Value company

“We just implemented an in-house solution for the entire company” –Consultant at E&Y

“We thought you were a floor planning product” – some random contact who reached out to me about the procuct, referring to StaffMap.com

“We could use the tool as a waste management company to help us coordinate waste pickup at labs all across the northeast” –manager of a waste management company

“We’re using salesforce” – consultant

“We could use it, but were a team of 5” – consultant

“Our culture is not interested in big brother monitoring” –consultant

“The partners here would prefer to retain control over their individual staff” – consultant

“We need to move quickly, decided to go with Everhour” – consultant of a long-term client

“We are certainly at a point where staffing has become a burdensome process. There is a subcommittee of us, of which I am a part, that’s trying to streamline it. Let me know if there is something I can look over, or if you want to set up a call. Certainly looking for practical solutions.” – Partner at consulting firm, eventually become our first customer

BAM! After more than a few conversations, I finally had a warm lead. As you can see, I had a few difficult conversations. I was glad that I hadn’t invested all this time into building a product before I had these conversations. Here’s what I learned about the product needs:

The product should be flexible enough to accomodate for varying cultures at these firms

The product value proposition was not clear enough (e.g. StaffMap.com and Waste Management Pickup Logistics was a fundamental misunderstanding of our objectives)

Some kind of integration was important to some of our customers.

Needs are vastly different at each firm

This really wasn’t going to be easy, but I thought, let me figure out what this one interested client needs and we can go from there. After an initial demo with the partner, he offered up a broader discussion with the rest of the partners. I was suprised - I thought the buyer would be someone in Human Resources. Turns out that the c-suite / partners at consultancies will always be the buyer - they are the most interested in increasing efficiencies, recouping potential lost consultant time and reducing burn out while maintaining culture. My pitch to them was simple:

“If you can recoup an hour of a consutant’s time, the solution pays for itself”.

That was the pitch. Full stop. And frankley, our tool enabled that with ease. Later on, I heard that the demo was was well recieved - they wanted to move forward! BUT they wanted to see a few things in place first.

So I built some of the main features that are still in place today:

Desktop tool to broadcast staff availability, utilization (e.g. how busy a consultant is on billable projects), PTO, both in the short-term and in the long-term.

Long-term calendar view of staff availability

Projections of staff availability and ability to help with a project given current restraints

Ability to claim a consultant’s time with the click of a button (this allowed us to track ROI to our consultant)

Some simple reporting metrics

Ability to add their staff roster and ability for staff to upload skill sets

These were the main features that was just enough for the client to pull the trigger on a monthly subscription at $6/user/month on a trial basis - this means that they loaded a few test users and evaluated how the system worked for them. It was a great way for them to gain comfort with the system and for us to work out the kinks with a live client.

We handled and still handle payments through Stripe, which reads the number of active staff they have in the solution and bills them monthly accounting for fluctations in the staff count over the course of the month. The first invoice for $208 went out on June 6, 2018 after about a year of development and the first pitch.

A YEAR’S WORTH OF WORK. More on this soon.

Staff Mapper Product Genesis and Ideation

Wed, 29 Jan 2020 08:57:19 -0500

After working at a few consultancies from 2011 to the better half of 2017, I realized something astonishing. Many professsional service firms, despite being people-focused, had a terrible system for tracking their people!

While at Huron Consulting and Berkekey Research Group, I realized that tons of time and resources were spent on resource management, through manual efforts like excel sheets where each staff member would jot down their availability. At Huron we used a resource management system called Retain, which allowed each staff member to project hours on their long-term assignments. It then constructed a large gantt chart to visualize pockets of capacity 2-6 months out. Cool, but not exactly helpful day to day…

At Berkeley, there was a desire to track shorter-term availability of staff to handle “just-in-time” requests for people’s time. Due to the highly dynamic nature of the work, immediate requests from clients and law firms often left consultants over-extended or with nothing to do. While i was there I built a small desktop tool to help staff put their hands up and broadcast their availability. The goal was to smooth out our resource constraints, by shifting hours from employee to employee so that no one was working 14 hour days. Eventually, this became a standard way to track and request people’s time. We built the ability to add skills and in some respects, it became a two-way market for consultants looking to get staffed and project coordinators looking to staff.

I left Berkeley in Dec 2016 with no real aims to build anything related to this. I spent the year consulting on various projects in the healthcare analytics space, slowly moving to other industries of interest using my software and analytics background but I continued to have this nagging desire to build a SAAS product. I had the skills to get an MVP in place. What to build was still on my mind. During this year, I was already working on another project, WorkDive, which allows freelancers and small businesses to track their time via SMS, but I realized that marketing and building a B2C business was HARD. And there were a ton of competitors, so I just continued to use it as my own home-grown time-keeping system - still use it to this day.

I still had an itch to build a second-related product - you guessed it! Staff Mapper was meant to address some of the resourcing issues i ran into at Huron and Berkeley, but i wanted to build the proof of concept and of course, only sell to businesses this time. This made sense, since most of my contacts were in consulting, so I knew where my customers lived.

After speaking with some potential customers, mostly friends in the consulting space, they almost all universally claimed to have a need, but i was sensing a little pushback. More on that in another update…

So I put pen to paper and with some very brief market research, product development began in earnest in July of 2017 (per my first Github commit :).

I didn’t realize I’d still be working on it today…

I’ll be writing more about this in a 3-part series. Sign up to get the updates.

Building a Serverless Contact Form and Integrating with Convertkit

Thu, 09 May 2019 09:57:19 -0400

Serverless - I’d argue that it’s not really serverless, but to the end-user it might as well be. While Serverless is useful to me, it also offers powerful oppurtunities for my less tech-saavy clients. Serverless allows you to do things that typically require a server. Basically, AWS and Cloud Formation handle setting up a runtime environment where you can deploy models and then sync it to an AWS Lambda function (e.g. input/output). Serverless, AFAIK, is tightly coupled to AWS services, and allows you to do all sorts of funky things. Today, I’ll show you how to build a contact form on your static site. Here is a SNEAK PREVIEW of the form. Feel free to reach out!

My business site is powered by Jekyll and runs on Github pages - it’s a completely static site. I thought it was about time to develop a simple contact form, rather than have visitors click those pesky email links so looked into my options. I only had two requirements:

I did NOT want to pay for a third party js library
I wanted to integrate with Convertkit

For some weird reason, the original repo contact form was sending an email to the submitter, which doesn’t make too much sense. I wanted it to be sent to me, so I could, you know, get back in touch. So the repo I created adjusts for that.

The setup is suprisingly easy. It took me the morning, but I have a fully functioning contact form that triggers an email to my inbox when someone reaches out AND adds a subscriber to my Convertkit account. Pretty cool.

Here’s how to get started:

git clone https://github.com/bvallier/python-ses-dynamodb-contactform.git
cd python-ses-dynamodb-contactform
npm install serverless -g
npm install
npm install --save serverless-python-requirements

Next, you should head to your AWS console and setup an Administrator with CLI access (search for the AdministratorAccess Policy). That policy should look like this:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": "*",
            "Resource": "*"
        }
    ]
}

Once setup, grab the credentials in the csv file and add to command line prompt below:

sls config credentials --provider aws --key <your_key> --secret <your_secret> --profile <your_iam_user_name>

Next, you’ll want to add a secrets.json file where you can pass along some of your secret info. You’ll also want to add a requirements.txt file. Both of these files will sit in the root of the project and look like the following:

secrets.json

{
  "REGION": "us-east-1",
  "PROFILE": "your_im_profile_alias",
  "SENDER_EMAIL": "the_email_setup_in_simple_email_service",
  "CONVERTKIT_KEY": "your_convertkit_api_key",
  "CONVERTKIT_FORM": "123123",
  "EMAIL_SUBJECT": "CONTACT REQUEST"
}

That SENDER_EMAIL key should be setup in AWS under Simple Email Service (SES, Go to: Under Identity Management => Email Addresses). Add the email address and follow the steps to get it verified. It’s like confirming your email for a subscription to a newsletter.

Since I’ve added the requests library to our handler.py file to make a POST request to Convertkit we need to tell Serverless that it should be packaged and brought into our environment. You’ll want to add that library to your requirements file below.

requirements.txt

requests==2.21.0

Finally, you can deploy:

sls deploy -v

Once it finishes, you can see two Lambda functions (ListLambdaFunction and SendMailLambdaFunction) on AWS. ListLambdaFunction is simply a GET request that retrieves all of you contacts and SendMailLambdaFunction is a function that allows you to add an entry to DynamoDB and triggers the SES service to send you an email when the contact form is submitted. I also sneak in a function that adds the contact to convertkit in the handler.py script. Easy enough huh?

Here’s the form I’m using. Make sure the id and name of the inputs match the script.js file, linked to below.

<form id="serverless-form" action="#">
    <div class="row">
        <div class="col-lg-4 offset-lg-2">
            <input type="text" class="form-control" autocomplete="given-name" id="firstname" name="firstname"
            placeholder=" Enter First Name" required>
        </div>
        <div class="col-lg-4">
            <input type="text" class="form-control" autocomplete="family-name" id="lastname" name="lastname"
            placeholder=" Enter Last Name" required>
        </div>
        </div>
        <br />
        <div class="row">
        <div class="col-lg-8 offset-lg-2">
            <input type="email" class="form-control" autocomplete="email" id="exampleInputEmail" name="email"
            placeholder=" Enter Email" required>
        </div>
        <div class="col-lg-8 offset-lg-2">
            <div class="form-group">
            <br />
            <textarea class="form-control" id="message" name="message" placeholder="Enter Your Message"
                required></textarea>
            </div>
            <div class="row">
            <div class="col-lg-4">
                <button type="submit" id="submit" class="btn btn-primary submit" style="cursor:pointer"><i id="loader" class="fa fa-paper-plane" aria-hidden="true"></i> Send Message</button>
            </div>
            <div class="col-lg-8">
                Kindly include any services you'd be interested in. We look forward to hearing from you.
            </div>
            </div>
        </div>
    </div>
</form>
<script>
    //Insert your lambda function URL here
    var URL = "https://12cas314qwed.execute-api.us-east-1.amazonaws.com/development/sendMail";
</script>
<script src="js/script.js"></script>

You’ll need to link to the scripts.js file located HERE.

That’s it. Setup didn’t take me long and I now have a nice, cheap, serverless contact form. Was fun getting to know serverless and hope to use it more in the future!