# TensorFlow Playground

> Source: https://aiwiki.ai/wiki/tensorflow_playground
> Updated: 2026-04-27
> Categories: Developer Tools, Education AI
> From AI Wiki (https://aiwiki.ai), a free encyclopedia of artificial intelligence. Quote with attribution.

# TensorFlow Playground

*See also: [Machine learning terms](/wiki/machine_learning_terms), [Neural network](/wiki/neural_network), [Deep learning](/wiki/deep_learning)*

**TensorFlow Playground** (also called the **Neural Network Playground** or, more recently, just **Playground**) is an interactive, browser-based visualization that lets users build and train small neural networks on toy datasets without writing code. It is hosted at [playground.tensorflow.org](https://playground.tensorflow.org) and was created by [Daniel Smilkov](/wiki/daniel_smilkov) and [Shan Carter](/wiki/shan_carter) of the [Google Brain](/wiki/google_brain) and Big Picture teams in 2016. The source code is open source under the Apache 2.0 license and lives in the `tensorflow/playground` repository on GitHub.

Despite its name, TensorFlow Playground does not run [TensorFlow](/wiki/tensorflow) under the hood. The site is a self-contained TypeScript program that implements forward and backward propagation in JavaScript and renders the network with [D3.js](/wiki/d3_js). The page itself states: "This is not an official Google product." The tool is widely used in classroom teaching, including Google's [Machine Learning Crash Course](/wiki/machine_learning_crash_course), and is one of the most cited examples of interactive machine learning education on the web.

## Overview

The Playground presents a single web page divided into four panels. From left to right these are: a data panel showing the training dataset on a two-dimensional grid, a feature panel listing the input features that feed into the network, a network panel showing the hidden layers and their neurons, and an output panel that visualizes the network's decision boundary in real time as training proceeds. Above these panels, a control bar lets the user choose the learning rate, activation function, regularization, regularization rate, problem type (classification or regression), and dataset noise level. A play button drives one epoch of mini-batch gradient descent per step, with training loss and test loss plotted at the top right corner of the output panel.

The combination is deliberately small. Inputs live in two dimensions, datasets contain at most a few hundred points, and the network supports up to six hidden layers of up to eight neurons each. The constraint is pedagogical: a small enough problem fits on a single screen and trains in seconds, so users can adjust a hyperparameter, click play, and see the effect almost immediately. The original paper that introduced the Playground describes the goal as letting users "experiment via direct manipulation rather than coding, enabling them to quickly build an intuition about neural nets" (Smilkov et al., 2017).

## History and authorship

TensorFlow Playground was launched in 2016, alongside the broader public push around TensorFlow that followed the framework's open-source release in November 2015. The two principal authors are Daniel Smilkov and Shan Carter, both then at Google. The tool was developed in collaboration with members of the Google Brain team and the Big Picture group, and its design and feedback credits explicitly include D. Sculley, Fernanda Viégas, and Martin Wattenberg. The Playground page also credits two earlier projects as direct inspirations: [Andrej Karpathy](/wiki/andrej_karpathy)'s [ConvNetJS](/wiki/convnetjs) demos, which trained convolutional and ordinary neural networks entirely in the browser, and [Christopher Olah](/wiki/chris_olah)'s essays on neural networks, which used interactive diagrams to explain backpropagation, manifolds, and topology.

A short paper describing the project, titled *Direct-Manipulation Visualization of Deep Networks*, was presented at the ICML 2016 Workshop on Visualization for Deep Learning. The authors of that paper are Daniel Smilkov, Shan Carter, D. Sculley, Fernanda B. Viégas, and Martin Wattenberg. A revised version was later posted to arXiv in August 2017 (arXiv:1708.03788). The paper argues that interactive visualization can give beginners an intuition about training dynamics that is hard to develop from textbook descriptions alone.

The project was open-sourced on GitHub at github.com/tensorflow/playground. The repository has received over 12,000 GitHub stars and continues to be maintained as a teaching resource. In Google's own educational properties the tool was eventually renamed simply "Playground," though the original name and URL are still in widespread use.

## Features

### Datasets

The Playground exposes six built-in two-dimensional toy datasets, four for classification and two for regression. They are generated programmatically each time the user clicks the regenerate button, with adjustable noise.

| Dataset | Type | Description |
| --- | --- | --- |
| Two Gaussians | Classification | Two clusters of points drawn from Gaussian distributions, one labeled positive and one negative. Linearly separable when noise is low. |
| Circle | Classification | Positive points sampled inside a disk, negative points sampled in an outer ring. Not linearly separable in raw (x, y), but trivially separable using x squared plus y squared. |
| XOR | Classification | Points labeled by the sign of the product of their coordinates, recovering the classic XOR pattern. Cannot be solved by a single neuron. |
| Spiral | Classification | Two interlocking Archimedean spirals. The hardest built-in dataset; usually requires several hidden layers and careful tuning to fit cleanly. |
| Plane | Regression | Targets are a linear function of x and y, clipped within a bounded radius. |
| Multi-Gaussian | Regression | Targets are a mixture of Gaussian peaks arranged in a grid pattern. |

A train/test ratio slider controls how much of the generated data is held out for evaluation. The displayed loss curves use mean squared error for regression and a similar squared loss for classification.

### Input features

Users can toggle which input features the network actually receives. The seven feature options expose classical feature engineering tricks alongside the raw inputs.

| Feature | Symbol | Notes |
| --- | --- | --- |
| x | X1 | Raw horizontal coordinate. |
| y | X2 | Raw vertical coordinate. |
| x squared | X1 squared | Captures circular boundaries when combined with y squared. |
| y squared | X2 squared | Captures circular boundaries when combined with x squared. |
| x times y | X1 X2 | Recovers the XOR pattern with a single linear classifier. |
| sin(x) | sin X1 | Periodic basis function in the horizontal direction. |
| sin(y) | sin X2 | Periodic basis function in the vertical direction. |

The state code in the repository (`src/state.ts`) also exposes cosine variants for x and y, though these are not surfaced as default toggles in the live UI. By turning features on and off, students can directly compare the classical machine learning approach (engineer good features, fit a shallow model) with the deep learning approach (use the raw inputs, add more hidden layers).

### Network architecture

The network panel exposes plus and minus controls for the number of hidden layers (from zero to six) and the number of neurons per layer (from one to eight). Each neuron is rendered as a small square that shows what region of input space activates it most strongly, and the connecting lines between neurons are rendered with thickness and color proportional to the learned weight (blue for positive, orange for negative). Hovering over a neuron magnifies its activation pattern in the output panel, which makes it easy to see how a deeper network composes simple half-plane detectors into curved or piecewise decision boundaries.

### Activation functions

Four activation functions are available, defined in the `Activations` class in `src/nn.ts`:

| Activation | Formula | Typical use in Playground |
| --- | --- | --- |
| [ReLU](/wiki/relu) | max(0, z) | Default modern choice. Good for deeper networks. Can produce sharp, piecewise-linear decision boundaries. |
| [Tanh](/wiki/tanh) | (e^z minus e^-z) / (e^z plus e^-z) | Smooth saturating activation. Often the best behaved on the spiral dataset for shallow networks. |
| [Sigmoid](/wiki/sigmoid_function) | 1 / (1 plus e^-z) | Saturates at 0 and 1. Useful for showing vanishing gradient effects in deeper networks. |
| Linear | z | No nonlinearity; the network reduces to a linear model regardless of depth. |

### Regularization and optimization

The regularizer dropdown offers None, [L1](/wiki/l1_regularization), and [L2](/wiki/l2_regularization). The implementation in `src/nn.ts` defines an `RegularizationFunction` class with both penalty and derivative methods for each, so the chosen regularizer is added directly to the gradient during backpropagation. The strength of the penalty is controlled by a regularization rate slider whose values run from 0 to 10 on a logarithmic scale.

The learning rate slider also runs on a logarithmic scale, from 0.00001 up to 10. Training uses mini-batch gradient descent with a batch size selectable up to 30. There is no momentum, no Adam, and no learning-rate schedule; the deliberate simplicity is part of the teaching design.

### Problem type and outputs

The problem type switch toggles between classification and regression. In classification mode the output panel renders the predicted class probability as a smooth gradient between blue and orange. In regression mode it renders the continuous predicted value with a similar color scheme. A discretize-output checkbox snaps the boundary to a hard line, which is useful when discussing the difference between probabilistic and thresholded predictions.

A show-test-data checkbox overlays held-out points on top of the decision surface, so students can see when the model is fitting the training set well but generalizing poorly to test data. The training and test loss curves are plotted in the top-right corner during training and update every epoch.

## Implementation details

TensorFlow Playground is written in TypeScript, with HTML and CSS for layout and presentation. The visualization layer uses [D3.js](/wiki/d3_js) for the dataset scatter plot, the decision-boundary heatmap, the per-neuron activation thumbnails, and the loss curves. The build pipeline uses npm and the TypeScript compiler, producing a static bundle that ships from a CDN with no server-side computation.

The key implementation point is that the neural network library at the heart of the Playground is custom, written from scratch in TypeScript inside `src/nn.ts`. It is not a binding to TensorFlow, TensorFlow.js, or any other framework. The file defines:

* a `Node` class representing a single neuron, holding its activation, accumulated input, error signal, and bias
* a `Link` class representing a weighted connection between two nodes
* a `buildNetwork` helper that wires up an arbitrary stack of fully connected layers
* `forwardProp` and `backProp` functions that implement the standard feed-forward and backpropagation algorithms
* an `updateWeights` function that applies the gradient with the chosen learning rate, regularization rate, and regularizer

The `Activations` class provides the four activation functions and their analytic derivatives. The `RegularizationFunction` class provides the L1 and L2 penalty functions and derivatives. Errors are computed with a simple squared error.

Dataset generation lives in `src/dataset.ts` and contains pure-function generators: `classifyTwoGaussData`, `classifyCircleData`, `classifyXORData`, `classifySpiralData`, `regressPlane`, and `regressGaussian`. Each function takes a sample count and a noise level and returns an array of two-dimensional examples with labels. Application state, including which features and hyperparameters are selected, is serialized into the URL hash by `src/state.ts`, which is what allows users to share specific configurations with a single link. This URL-based state is the mechanism that makes the Playground a useful teaching artifact: an instructor can set up an interesting configuration, copy the URL, and email it to a class.

## Educational use

The Playground has become a standard teaching artifact in introductory machine learning curricula. Google integrated it into its own [Machine Learning Crash Course](/wiki/machine_learning_crash_course), where several lessons rely on it for hands-on exercises in feature crosses, neural networks, and regularization. The exercises in that course explicitly walk students through Playground configurations, asking them to predict what will happen and then click play to verify or correct their intuition.

University courses use the Playground in similar ways. It appears in introductory deep learning lectures at multiple universities and in many massive open online courses on neural networks. Outside of formal courses, it has been featured in popular tutorial posts, including the 2016 Google Cloud blog post by Kaz Sato titled *Understanding Neural Networks with TensorFlow Playground*, which uses a sequence of Playground configurations to walk through single-neuron classification, hidden layers, and the double-spiral problem.

The AI4K12 initiative, which develops AI curriculum guidelines for kindergarten through twelfth grade in the United States, lists the Playground as a recommended classroom demonstration tool because it lets students see the relationship between data, model capacity, and decision boundary without any programming prerequisites.

## Pedagogical value

The value of the Playground for teaching comes from making several abstract ideas concrete:

* **Universal approximation in practice.** The [universal approximation theorem](/wiki/universal_approximation_theorem) states that a feed-forward network with one hidden layer of sufficient width can approximate any continuous function. The Playground lets students see a concrete, almost-mechanical version of this fact by adding neurons to a single hidden layer and watching the decision boundary slowly bend to fit the data. It also makes clear what the theorem does not say: that finding the right weights is easy, that gradient descent will reliably converge, or that the resulting model will generalize.
* **Why nonlinearities matter.** Switching the activation function to Linear makes any network, no matter how deep, collapse to a linear model. Students can verify this by trying to fit the XOR or spiral dataset with a deep linear network and watching it fail. Switching back to Tanh or ReLU on the same network instantly fixes the problem, which makes the role of the nonlinearity tangible.
* **Feature engineering versus depth.** With the spiral dataset selected, a student can solve it in two qualitatively different ways: by enabling the engineered features (x squared, y squared, sin x, sin y) on a shallow network, or by leaving only the raw x and y on but adding several hidden layers. The result is a small live demonstration of why deep learning replaced hand-crafted feature engineering for many problems.
* **Overfitting and regularization.** Increasing the network capacity until the test loss diverges from the training loss is a one-click experiment in the Playground, and switching on L1 or L2 regularization to bring them back together is another. The L1 case is especially vivid because the connection lines for unused features visibly thin out as their weights are driven to zero.
* **Hyperparameter sensitivity.** Setting the learning rate to 10 or to 0.00001 demonstrates divergence and stalling respectively, which is harder to feel from a textbook formula than from a misbehaving live demo.

A recurring pedagogical observation, made explicit in the Smilkov et al. paper, is that direct manipulation lowers the activation energy required to test a hypothesis. Reading about overfitting in a textbook does not commit the idea to memory; doubling the layers in the Playground, watching the test loss climb while the training loss falls, and then turning on L2 regularization to fix it usually does.

## Influence and related tools

The Playground is part of a small lineage of in-browser interactive machine learning visualizations.

| Tool | Author(s) | Year | Notes |
| --- | --- | --- | --- |
| [ConvNetJS](/wiki/convnetjs) | Andrej Karpathy | 2014 | JavaScript library that trains convolutional and fully connected networks in the browser; cited as a direct inspiration for the Playground. |
| Olah's neural network essays | [Christopher Olah](/wiki/chris_olah) | 2014 onward | Essays such as *Neural Networks, Manifolds, and Topology* used interactive diagrams to explain how networks transform data. |
| TensorFlow Playground | Daniel Smilkov, Shan Carter | 2016 | Subject of this article. |
| [Distill.pub](/wiki/distill) | Shan Carter, Christopher Olah, and others | 2017 | Online journal of interactive machine learning articles, founded in part by the same Google researchers behind the Playground. |
| [TensorFlow.js](/wiki/tensorflow_js) demos | Google | 2018 onward | Browser-based ML library that supports a much wider class of in-browser experiments and powers many later interactive demos. |
| Embedding Projector | Daniel Smilkov, Nikhil Thorat, and others | 2016 | Interactive 3D visualization of high-dimensional embeddings, also from the Google Big Picture team. |

The Playground's user interface conventions, especially using line thickness and color for weights and a heatmap for the decision boundary, have been reused and adapted in many later interactive ML articles, dashboards, and teaching tools. Several reimplementations exist, including a Python port (`TFPlaygroundPSA`) used for studying parameter-space behavior and forks that swap in different optimizers or datasets.

## Limitations

The Playground is intentionally narrow, and its limitations are part of its design rather than oversights, but it is worth listing them when teaching with it.

* **Two-dimensional toy data only.** The input space is always two-dimensional and synthetic, so the Playground cannot represent the high-dimensional structure of real images, text, or tabular data. Lessons learned in two dimensions do not always transfer cleanly to thousands of dimensions.
* **Small networks only.** With at most six hidden layers of eight neurons, the Playground cannot demonstrate deep architectures used in modern practice. It also cannot show convolutional, recurrent, or attention-based layers.
* **Custom JavaScript, not TensorFlow.** Despite the name, no part of the actual TensorFlow runtime is invoked. Behavior on real production frameworks may differ in subtle ways, especially with respect to numerical precision, optimizer choice, and weight initialization.
* **Squared loss for classification.** The Playground uses a simple squared error rather than cross-entropy, which means probability calibration and gradient behavior are not faithful to common modern practice.
* **No optimizer choices beyond plain SGD.** There is no momentum, no Adam, and no learning-rate schedule. Phenomena such as adaptive optimization or warmup cannot be illustrated directly.
* **No reproducibility controls.** Although state is stored in the URL, the random initialization of weights and dataset sampling cannot be seeded from the UI, so two users with the same URL may still see slightly different runs.

These constraints keep the tool fast and approachable but mean that the Playground is best used as a first encounter with neural networks rather than a serious experimental workbench.

## See also

* [Neural network](/wiki/neural_network)
* [Deep learning](/wiki/deep_learning)
* [Backpropagation](/wiki/backpropagation)
* [TensorFlow](/wiki/tensorflow)
* [TensorFlow.js](/wiki/tensorflow_js)
* [Machine Learning Crash Course](/wiki/machine_learning_crash_course)
* [ConvNetJS](/wiki/convnetjs)
* [Distill.pub](/wiki/distill)
* [Universal approximation theorem](/wiki/universal_approximation_theorem)

## Explain like I'm 5 (ELI5)

Imagine a digital chalkboard where blue dots and orange dots are sprinkled around. Your job is to draw a squiggly line that puts all the blue dots on one side and all the orange dots on the other. TensorFlow Playground is a website where the computer draws that line for you, and you get to decide how it learns. You pick how many helpers (called neurons) it has, you pick how many groups of helpers there are, and you pick how big its steps are when it tries new ideas. Then you press play and watch the line wiggle around until it gets the dots right. If you give it too many helpers, it tries too hard and remembers each dot instead of learning the pattern, which is what people mean by overfitting. If you give it too few, it cannot fit the shape at all. Playing with these dials for a few minutes teaches you more about neural networks than reading three chapters of a textbook.

## References

1. Smilkov, D., Carter, S., Sculley, D., Viégas, F. B., and Wattenberg, M. (2016). *Direct-Manipulation Visualization of Deep Networks*. ICML 2016 Workshop on Visualization for Deep Learning. Available at https://icmlviz.github.io/icmlviz2016/assets/papers/15.pdf
2. Smilkov, D., Carter, S., Sculley, D., Viégas, F. B., and Wattenberg, M. (2017). *Direct-Manipulation Visualization of Deep Networks*. arXiv:1708.03788. https://arxiv.org/abs/1708.03788
3. Smilkov, D. and Carter, S. (2016). *A Neural Network Playground*. Live web application. https://playground.tensorflow.org
4. TensorFlow Playground source code repository. *tensorflow/playground* on GitHub. Apache License 2.0. https://github.com/tensorflow/playground
5. Sato, K. (2016). *Understanding Neural Networks with TensorFlow Playground*. Google Cloud Blog, July 27, 2016. https://cloud.google.com/blog/products/ai-machine-learning/understanding-neural-networks-with-tensorflow-playground
6. Google Developers. *Machine Learning Crash Course: Neural Networks Playground Exercises*. https://developers.google.com/machine-learning/crash-course/introduction-to-neural-networks/playground-exercises
7. Google. *Playground (Help Center)*. ML Education Help. https://support.google.com/machinelearningeducation/answer/7654447
8. Karpathy, A. (2014). *ConvNetJS: Deep Learning in your browser*. Stanford University. https://cs.stanford.edu/people/karpathy/convnetjs/
9. Olah, C. (2014). *Neural Networks, Manifolds, and Topology*. http://colah.github.io/posts/2014-03-NN-Manifolds-Topology/
10. AI4K12 Initiative. *TensorFlow Playground*. AI for K-12 resource list. https://ai4k12.org/tensorflow-playground/