Interactive demonstration of MatrixAPI's geographic and vehicle data endpoints. Watch how the dropdowns populate and cascade based on your selections.
Select a country to see its subdivisions (states, provinces, departments, etc.), then select a subdivision to see its cities. All data is live from the API.
0 countries available
0 subdivisions available
0 cities available
Select a vehicle manufacturer to see available models for 1982. Use the checkboxes to filter by vehicle type. Note: Vehicle API uses historical data for demonstration purposes. Cars and SUVs are selected by default.
0 makes available
0 models available
// Fetch countries (free endpoint)
const response = await fetch('https://matrixapi.dev/api/v1/countries');
const data = await response.json();
// Populate dropdown
data.countries.forEach(country => {
option.value = country.iso2;
option.textContent = country.name;
dropdown.appendChild(option);
});
// Fetch vehicles (requires API key in production)
const vehiclesResponse = await fetch('https://matrixapi.dev/api/v1/vehicles', {
headers: {
'X-API-Key': 'your_api_key_here' // Only needed in production
}
});
const vehicleData = await vehiclesResponse.json();
// Fetch subdivisions when country changes
const subdivisions = await fetch(`https://matrixapi.dev/api/v1/countries/${countryCode}/subdivisions`);
const subData = await subdivisions.json();
// Fetch cities when subdivision changes
const cities = await fetch(`https://matrixapi.dev/api/v1/cities?country=${countryCode}&state=${subdivisionCode}`);
const cityData = await cities.json();