What you'll build
A professional analytics dashboard featuring:
- KPI metric cards (revenue, users, growth %)
- Line, bar, and pie charts using Chart.js
- Responsive grid layout
- Color-coded status indicators (up/down trends)
- Clean, modern design ready to customize
Step 1: Go to the playground
1
Open /try.html
Visit /try.html in your browser.
Step 2: Write your dashboard prompt
2
Describe what you want to track
Use a prompt like this:
Build a single-file HTML analytics dashboard with: 1) Top row: 4 KPI cards (Revenue, Active Users, Conversion Rate, Churn Rate); 2) Middle: Line chart showing daily revenue over 30 days; 3) Bottom: Two charts side-by-side (pie chart for revenue by region, bar chart for signups vs churn). Use Chart.js for charts. Include mock data. Professional dark theme with accent color. Responsive grid layout.
Or customize with your own metrics:
- Your company/app name
- Specific KPIs you care about
- Time period (7 days, 30 days, year-to-date)
- Color scheme (dark/light, brand colors)
Pro tip: The more specific your metrics, the better. Instead of "make a dashboard," try "build a SaaS dashboard for an email marketing tool, showing: campaigns sent, open rate, click rate, and revenue MRR."
Step 3: Generate and preview
3
Click "Send"
Select your preferred provider (Claude for best quality, DeepSeek for speed) and click "Send". The AI will generate a complete, interactive dashboard in the preview pane.
You'll see the charts render in real-time, with mock data already populated.
Understanding the structure
The generated dashboard includes:
- Chart.js library: A popular open-source charting library loaded from CDN
- Mock data: Realistic sample numbers for all KPIs and charts
- CSS Grid layout: Responsive cards that stack on mobile
- Interactive charts: Hover over data points to see values
All of this is generated as a single HTML file with embedded CSS and JavaScript — no build step or external dependencies needed.
Step 4: Customize with follow-ups
4
Ask for changes using "Continue"
Refine your dashboard with follow-up prompts:
- "Add a date range picker at the top to filter data"
- "Change the revenue chart to show monthly instead of daily"
- "Make the KPI cards larger and add sparkline mini-charts"
- "Switch from Chart.js to a different visualization library"
- "Add a forecast chart showing predicted growth"
Connecting to real data
The generated dashboard uses mock/sample data. To connect real data:
- Export the HTML file from LingCode
- Open it in a code editor
- Find the data arrays (usually in `