Rime API examples & templates
Use these vals as a playground to view and fork Rime API examples and templates on Val Town. Run any example below or find templates that can be used as a pre-built solution.
dcm31
wiredReactPlayground
Wired Components React Playground An interactive playground for experimenting with the wired-elements library using React. This playground allows you to: Browse and preview available wired components Add components to a canvas with a single click Customize components with different colors Drag and drop to arrange components Edit component text and attributes Generate HTML code for your custom layout Features React-based Interface : Built using React for a smooth, modern experience Component Library : Easy access to common wired-elements components Interactive Preview : See how components look and behave in real-time Drag & Drop Interface : Easily arrange your components on the canvas Color Customization : Apply different colors to components from a color palette Component Editing : Customize text, values, and attributes with a dialog interface Code Generation : Get the HTML code for your design with one click How to Use Click on any component in the sidebar to add it to the playground Use the color picker to choose a color for new components Drag components to rearrange them in the playground Click the edit (✏️) button to modify component properties Click the delete (🗑️) button to remove a component Click "Show Code" to view the generated HTML The playground uses the hand-drawn "Architects Daughter" font to complement the sketched UI elements. Components Available Buttons Input fields Textareas Checkboxes Cards Progress bars Sliders Toggles Each component maintains the hand-drawn aesthetic of the wired-elements library while being fully functional and customizable.
dcm31
wired_components_playground
Wired Components Playground A playground for experimenting with the wired-elements library, which provides hand-drawn UI components. This playground allows you to: Browse and preview available wired components Add components to a canvas Customize components with different colors Drag and drop to arrange components Edit component text and attributes Generate HTML code for your custom layout Features Component Library : Browse the available wired-elements components Interactive Preview : See how components look and behave Drag & Drop Interface : Easily arrange your components Color Customization : Apply different colors to components Code Generation : Get the HTML code for your design Edit Controls : Customize text and attributes of components Light/Dark Mode : Toggle between light and dark themes How to Use Browse the component examples in the card grid Click "Add to playground" on any component you want to use Use the color picker to choose colors for your components Drag components to rearrange them in the playground Use the edit (✏️) and delete (🗑️) controls to modify components View the generated HTML code at the bottom of the page The playground uses the hand-drawn "Architects Daughter" font to complement the sketched UI elements.
braintrust
sdk
Build better AI products with Braintrust Braintrust helps you evaluate and ship AI products with confidence. Whether you're building a new AI application or improving an existing one, Braintrust gives you the tools to iterate faster and deploy with confidence. What you can do with this SDK The Braintrust SDK enables you to: Log experiments and production data to understand your AI system's behavior Run comprehensive evaluations using the Eval framework Track and improve your model's performance over time This template helps you get started with the Braintrust SDK. It's based on our official GitHub repository . Getting started Click Fork on this val to create your own copy Get your API key from the Braintrust settings page Add your API key to your project's Environment Variables as BRAINTRUST_API_KEY Click Run on the tutorial val to start experimenting Want to learn more? Visit our documentation or sign up for a free account .
albankedi
Agency
Bootstrap & Grid System Project Overview: Create a responsive webpage for a fictional restaurant using Bootstrap and its grid system. Requirements: Header Section:
Include a navigation bar with the restaurant's name on the left and navigation links (Home, Menu, About Us, Contact) on the right.
Hero Section:
Add a hero section with an image background showcasing a delicious dish.
Place a heading and a button in the center of the hero section.
Menu Section:
Create a grid layout for the menu section.
Display at least three menu items, each with an image, title, description, and price.
About Us Section:
Use the grid system to create a two-column layout.
Include an image on one side and a paragraph about the restaurant on the other.
Contact Section:
Design a contact section with a form.
Include fields for name, email, message, and a submit button.
Footer:
Design a simple footer with copyright information and social media icons.
Bootstrap Components Checkpoint Project Overview: Create a landing page for a travel agency using Bootstrap components. Requirements: Navbar:
Include a navigation bar with the agency's name/logo on the left.
Add navigation links (Home, Destinations, Tours, Contact) on the right.
Hero Section:
Design a hero section with a background image showcasing a scenic travel destination.
Place a heading, a subheading, and a prominent call-to-action button in the center.
Destinations Section:
Create a grid layout to display images and brief descriptions of at least three travel destinations.
Utilize Bootstrap cards for each destination, including an image, title, description, and a "Learn More" button.
Tours Section:
Use Bootstrap's accordion component to showcase different tour packages.
Each accordion item should have a title, a brief description, and a "View Details" link.
Contact Form:
Design a contact form section using Bootstrap's form components.
Include fields for name, email, destination of interest, and a message.
Footer:
Design a footer with copyright information and social media icons. Instructions Technical Requirements: Utilize Bootstrap's grid system for creating responsive layouts.
Make sure the webpage is well-designed and user-friendly.
Test the responsiveness on different screen sizes.
Additional Guidelines: Customize the Bootstrap styles to match the theme of a restaurant.
Experiment with different grid classes (e.g., container, row, col-md-6) to achieve the desired layout.
Enhance the design with additional Bootstrap components if desired (e.g., cards, badges).
Technical Requirements: Utilize Bootstrap components such as the navbar, jumbotron, cards, accordion, and form elements.
Ensure the webpage is fully responsive.
Test the layout on different screen sizes to ensure responsiveness.
Additional Guidelines: Customize Bootstrap styles to match the travel agency theme.
Use appropriate classes for responsiveness, such as container, row, col-md-6, etc.
Enhance the design by incorporating relevant images and content.
piyush12kunjilwar
swiftOrangeLouse
🌦️ Weather Dashboard – Real-Time Weather Insights at Your Fingertips
A modern React-powered weather application delivering real-time conditions and forecasts with intuitive visuals. 👉 Live Demo (Deployable via Val Town) Weather Dashboard Preview
Clean interface showing current weather and 5-day forecast 🌟 Features That Shine
🎯 Precision Forecasting
Instant Weather Snapshots: Current temp, humidity, wind speed 5-Day Outlook: Daily max/min temps with weather codes Smart Location Search: Find any city worldwide 🎨 Designed for Humans
Weather Glyphs: 20+ intuitive weather code icons Mobile-Ready: Flawless experience on all devices Performance Optimized: Dual API calls for fast loads ⚡ Power Features
Geo-Smart Default: Starts with NYC, adapts to your searches Source Transparency: One-click code inspection Error Resilient: Graceful API failure handling 🛠️ Tech Powerhouse
Component Technology Role
Core Framework React 18 Dynamic UI Components
Styling CSS Modules Pixel-Perfect Layouts
Geo-Services Open-Meteo API Location/Weather Data
Hosting Val Town Serverless Deployment
Package Mgmt ESM Browser-Native Imports
🚀 Quick Start Guide Local Exploration git clone https://github.com/piyush12kunjilwar/weather-dashboard.git
cd weather-dashboard No npm install needed – ESM powered! API Integration Map graph TD
A[User Search] --> B{Geocoding API}
B -->|Lat/Long| C{Weather API}
C --> D[Current Data]
C --> E[5-Day Forecast]
D --> F[Display Dashboard]
E --> F Key Endpoints: Geocoding: https://geocoding-api.open-meteo.com/v1/search Weather: https://api.open-meteo.com/v1/forecast 🕹️ User Flow
Search Any City
Try "Marrakesh" or "Buenos Aires" Decode Weather Glyphs
☀️ = Clear | ⛈️ = Storm | 🌫️ = Fog Track Trends
Hover forecast cards for detailed temps 🧑💻 Developer Playground
Customization Ideas: // Try these tweaks:
const ENHANCEMENTS = {
UNITS: 'imperial', // Switch to Fahrenheit
FORECAST_DAYS: 7, // Full week outlook
NEW_FEATURES: ['uv_index', 'precipitation']
}; Architecture Highlights: Component-based state management Dynamic weather code mapping Responsive CSS grid layouts 🌱 Contribution Ecosystem
We Welcome: New weather icon designs Local storage implementations Unit conversion toggles Accessibility enhancements 📜 License Commons
MIT Licensed – Open skies, open code!
See LICENSE for full details.
