Fill in Bus Info
On the left side panel, enter your School Name, Route #, Bus Number, and Driver Name. This info appears on your printed chart and downloaded email file.
Add Students to the Roster
Type a student's name, select their grade from the dropdown, and click โ Add to Roster โ or press Enter. Students are automatically color-coded: Kโ5 6โ8 9โ12. You can also bulk-import using a CSV file (see the CSV Guide tab).
Assign Students to Seats
You have two ways to assign seats:
Drag & Drop: Grab a student from the roster and drag them onto any seat on the bus chart. The seat will highlight blue when you hover over it.
Click to Select: Click a student in the roster (they'll get a blue outline), then click any open seat to assign them.
Rearrange Seats Anytime
Already seated students can be dragged between seats to reassign them. To fully unseat a student, click the โ button next to their name โ they'll return to the roster as unassigned.
Save Your Chart
Click ๐พ Save in the toolbar and choose one of your 5 save slots. Your chart is stored in the browser โ close the page and come back anytime. Click ๐ Load to restore a saved chart.
Print or Share
Click ๐จ๏ธ Print to print a clean chart showing bus info, all seat assignments, and a full student roster โ the footer and sidebar are automatically hidden.
Click โ๏ธ Email to download a colorful HTML file you can attach to any email. The recipient opens it in a browser โ no app needed.
The bus has 24 seats arranged in two columns with an aisle down the middle:
Each seat holds up to 3 students. A seat shows its capacity as 0/3, 1/3, 2/3, or 3/3 in the top corner. Full seats (3/3) are marked with a solid border and cannot accept more students.
Drag & Drop
Drag students from the roster directly onto any seat. Drag seated students between seats to reassign them instantly.
Color-Coded Grades
Students are automatically colored by grade group โ Kโ5 teal, 6โ8 purple, 9โ12 orange โ making the chart easy to read at a glance.
CSV Import
Bulk-add your entire student roster by uploading a .csv file or pasting CSV text. Optional Seat column auto-assigns students on import.
Save & Load (5 Slots)
Save up to 5 different seating charts to your browser. Perfect for managing multiple routes, buses, or school days.
Print View
Clean, color-coded print layout with bus info header, all seat assignments by seat number, and a full AโZ student roster.
Email / Download
Download a self-contained HTML file to attach to any email. Recipients open it in any browser โ no app or login needed.
Roster Search
Instantly filter students by name in the roster panel. Seated and unassigned students are sorted automatically.
24 Seats, 3 Per Seat
L1โL12 on the left, R1โR12 on the right. Each seat holds up to 3 students with a live capacity counter.
Live Stats
The header always shows total students, how many are seated, and how many spots are used out of 72 total.
Bus Info Header
Enter school name, route number, bus number, and driver name. Appears on the chart banner, printed pages, and email files.
Mobile Friendly
Fully responsive โ works on phones and tablets. Install as a PWA on Android or iPhone for a native app experience.
Works Offline
Once loaded, the app works without an internet connection. All data stays in your browser โ nothing is sent to a server.
Your CSV file needs at minimum a Name column and a Grade column. A Seat column is optional โ include it to auto-assign students to seats on import.
| Name | Grade | Seat (optional) |
|---|---|---|
| Alice Smith | 3 | 1 |
| Bob Jones | 7 | 2 |
| Carol Lee | K | 1 |
| David Park | 11 | |
| Emma White | 9 | 5 |
Use these exact values in the Grade column:
Seats must be numbers 1โ24. Leave the Seat column blank if you want to assign manually.
Create your spreadsheet
In Excel or Google Sheets, create columns: Name, Grade, and optionally Seat. Fill in your students.
Save as CSV
In Excel: File โ Save As โ CSV (Comma delimited). In Google Sheets: File โ Download โ CSV.
Import into the app
Click ๐ฅ CSV Import in the toolbar. Drag your .csv file onto the drop zone, or click to browse. A preview table appears โ confirm it looks right, then click Import Students.
โข The file must be saved as .csv format, not .xlsx or .xls
โข Column headers must be exactly
Name, Grade, and optionally Seatโข Grade must be
K or a number 1โ12 (no "1st", "Grade 3", etc.)โข Seat numbers must be
1โ24โข The preview table in the import modal will show any problem rows before you import
bus-seating.html app file instead, along with the save data (they'd need to import it on their device).