---
title: Interactive Playground - PostCSS Preset Env - CSS Tools
description: Play with PostCSS Preset Env in your browser
---
{% extends "layouts/base.njk" %}

{% block content %}
<main class="ppe-playground">
	<h1 class="u-visually-hidden">Interactive playground for PostCSS Preset Env</h1>

	<div class="editors-container">
		<div id="controls" class="controls">
			<fieldset>
				<label for="browsers">browserslist</label>
				<input type="text" name="browsers" id="browsers">
				<a href="https://browsersl.ist/#q=%3E+0.2%25+and+not+dead" target="_blank">ℹ︎</a>
			</fieldset>

			<fieldset>
				<label for="minimumVendorImplementations">implementations</label>
				<input type="number" name="minimumVendorImplementations" id="minimumVendorImplementations" max="4" min="0">
			</fieldset>

			<fieldset>
				<label for="stage">stage</label>
				<input type="number" name="stage" id="stage" max="4" min="0">
			</fieldset>

			<fieldset>
				<label for="preserve">preserve</label>
				<select id="preserve">
					<option value="">not set</option>
					<option value="true">true</option>
					<option value="false">false</option>
				</select>
			</fieldset>

			<fieldset>
				<label for="inlineDirection">inline direction</label>
				<select id="inlineDirection">
					<option selected value="left-to-right">left to right</option>
					<option value="right-to-left">right to left</option>
					<option value="top-to-bottom">top to bottom</option>
					<option value="bottom-to-top">bottom to top</option>
				</select>
			</fieldset>
			<fieldset>
				<label for="blockDirection">block direction</label>
				<select id="blockDirection">
					<option value="left-to-right">left to right</option>
					<option value="right-to-left">right to left</option>
					<option selected value="top-to-bottom">top to bottom</option>
					<option value="bottom-to-top">bottom to top</option>
				</select>
			</fieldset>

			<fieldset>
				<label for="enableClientSidePolyfills">enable client-side polyfills</label>
				<input type="checkbox" name="enableClientSidePolyfills" id="enableClientSidePolyfills">
			</fieldset>
		</div>

		<div class="editors">
			<div id="input-editor" class="editor"></div>
			<div id="config-editor" class="editor" data-preset-env-version="{{ presetVersionPlayground }}"></div>
			<div id="output-editor" class="editor"></div>
		</div>
	</div>
</main>
{% endblock %}

{% block scripts %}<script async defer src="{{ "/static/js/playground.js" | addHash }}"></script>{% endblock %}
