๐ŸšŒ

Bus Seating Chart

How to Use & FAQ ยท by Michelle Minor ยท 2026
๐Ÿ“– How to Use
Get your bus seated in minutes โ€” follow these simple steps.
๐Ÿš€ Getting Started
1
๐ŸšŒ

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.

2
โœ๏ธ

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).

3
๐Ÿ–ฑ๏ธ

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.

4
๐Ÿ”„

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.

5
๐Ÿ’พ

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.

6
๐Ÿ–จ๏ธ

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.

๐Ÿ’ก
Pro tip: Use the ๐Ÿ” Search box in the Roster panel to quickly find any student by name. Seated students appear dimmed at the bottom of the list so you can focus on who still needs a seat.
๐Ÿช‘ Seat Layout

The bus has 24 seats arranged in two columns with an aisle down the middle:

LEFT SIDE
L1 โ€“ L12
โ†•
RIGHT SIDE
R1 โ€“ R12

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.

โš™๏ธ Features
Everything the app can do, at a glance.
๐Ÿ–ฑ๏ธ

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.

๐Ÿ“ฅ CSV Import Guide
Import your whole class list in seconds โ€” no typing required.
๐Ÿ“„ CSV Format

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 Smith31
Bob Jones72
Carol LeeK1
David Park11
Emma White95
โœ… Valid Grade Values

Use these exact values in the Grade column:

K 12345 678 9101112

Seats must be numbers 1โ€“24. Leave the Seat column blank if you want to assign manually.

๐Ÿš€ How to Import
1
๐Ÿ“Š

Create your spreadsheet

In Excel or Google Sheets, create columns: Name, Grade, and optionally Seat. Fill in your students.

2
๐Ÿ’พ

Save as CSV

In Excel: File โ†’ Save As โ†’ CSV (Comma delimited). In Google Sheets: File โ†’ Download โ†’ CSV.

3
๐Ÿ“ฅ

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.

๐Ÿ’ก
Tip: Students who already exist in the roster (same name) will be skipped automatically โ€” no duplicates. You can re-import an updated file anytime to add new students.
โ“ Frequently Asked Questions
Quick answers to common questions.
Will my data be saved if I close the browser? โ–ผ
Yes! The app stores all student and seat data in your browser's localStorage. As long as you use the same browser on the same device, your roster and assignments will be there when you come back. Use the ๐Ÿ’พ Save button for extra security โ€” it gives you up to 5 named save slots.
Can I manage multiple buses or routes? โ–ผ
Yes! Use the 5 Save Slots to store separate charts for different buses or routes. Each slot saves the bus info, full roster, and all seat assignments independently. Click ๐Ÿ’พ Save โ†’ Save Here for each bus, then ๐Ÿ“‚ Load to switch between them.
How many students can each seat hold? โ–ผ
Each seat holds a maximum of 3 students. The seat shows a live counter (e.g. 2/3). Once a seat reaches 3/3, it's marked as full and won't accept more students. The bus has 24 seats for a total capacity of 72 students.
Can I move a student from one seat to another? โ–ผ
Yes! Just drag the student's tag directly from their current seat to a new seat on the bus chart. The new seat will highlight blue when you hover over it. You can also click the โœ• button to unseat them back to the roster, then reassign them.
Does the app work on phones and tablets? โ–ผ
Yes, the app is fully responsive and works on phones and tablets. For the best mobile experience, install it as a PWA (Progressive Web App) โ€” on Android open it in Chrome and tap Add to Home Screen; on iPhone use Safari and tap Share โ†’ Add to Home Screen. It will open full-screen like a native app.
Is student data sent to any server? โ–ผ
No. All student names, grades, and seat assignments are stored only in your browser's local storage on your device. Nothing is transmitted to any server or third party. The app works completely offline once loaded.
My CSV import isn't working โ€” what's wrong? โ–ผ
Check these common issues:

โ€ข 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
Can the person I email it to edit the chart? โ–ผ
The downloaded email file is a view-only snapshot โ€” it shows the seating chart exactly as it was when you downloaded it, but it's not interactive. If you want to share an editable version, send the main bus-seating.html app file instead, along with the save data (they'd need to import it on their device).
How do I clear everything and start over? โ–ผ
Click the ๐Ÿ—‘ Clear All button in the top right of the bus chart. This removes all seat assignments but keeps your roster intact. To remove individual students, click the โœ• button next to their name in the roster. To delete a saved slot, go to ๐Ÿ’พ Save and click the red โœ• on any slot.
Is the app really free? โ–ผ
Yes, completely free! Created by Michelle Minor to help school staff manage bus seating easily. If it saves you time, a Diet Coke donation is always appreciated to help keep it available ๐Ÿฅค