diff --git a/packages/playground-examples/copy/es/JavaScript/External APIs/TypeScript with Deno.ts b/packages/playground-examples/copy/es/JavaScript/External APIs/TypeScript with Deno.ts
new file mode 100644
index 000000000000..f15d8a8f1db3
--- /dev/null
+++ b/packages/playground-examples/copy/es/JavaScript/External APIs/TypeScript with Deno.ts	
@@ -0,0 +1,37 @@
+//// { title: 'TypeScript con Deno', order: 3 }
+
+// Deno es un entorno en tiempo de ejecución aún
+// incompleto para JavaScript y TypeScript basado en
+// v8 con un enfoque marcado en la seguridad.
+
+// https://deno.land
+
+// Deno cuenta con un sistema de permisos con base en el aislamiento, 
+// lo cual reduce el acceso que tiene JavaScript al sistema de
+// archivos o a la red y utiliza importaciones basadas en http, las
+// cuales son descargadas y almacenadas localmente.
+
+// Aquí hay un ejemplo del uso de deno para crear scripts:
+
+import compose from "https://deno.land/x/denofun/lib/compose.ts";
+
+function greet(name: string) {
+  return `¡Hola, ${name}!`
+}
+
+function makeLoud(x: string) {
+  return x.toUpperCase();
+}
+
+const greetLoudly = compose(
+  makeLoud, 
+  greet
+);
+
+// Dice "¡HOLA, MUNDO!."
+greetLoudly("mundo");
+
+import concat from "https://deno.land/x/denofun/lib/concat.ts";
+
+// Devuelve "holamundo"
+concat("hola", "mundo");
diff --git a/packages/playground-examples/copy/es/JavaScript/External APIs/TypeScript with Node.js b/packages/playground-examples/copy/es/JavaScript/External APIs/TypeScript with Node.js
new file mode 100644
index 000000000000..3ced1e83c1ff
--- /dev/null
+++ b/packages/playground-examples/copy/es/JavaScript/External APIs/TypeScript with Node.js	
@@ -0,0 +1,56 @@
+//// { title: 'TypeScript con Node', order: 3, isJavaScript: true }
+
+// Node.js en un entorno de ejecución muy popular para JavaScript,
+// construido sobre v8, el motor de JavaScript que utiliza Chrome. 
+// Puedes usarlo para construir servidores, interfaces de usuario y
+// cualquier otra cosa que se le parezca.
+
+// https://nodejs.org/
+
+// Node.js tiene con un conjunto de bibliotecas principales que
+// extienden el entorno de ejecución de JavaScript. Van desde el 
+// manejo de rutas del sistema operativo:
+
+import { join } from "path";
+const myPath = join("~", "downloads", "todo_list.json");
+
+// hasta la manipulación de archivos:
+
+import { readFileSync } from "fs";
+const todoListText = readFileSync(myPath, "utf8");
+
+// Puedes añadir incrementalmente tipos a tus proyectos de JavaScript
+// usando tipos al estilo JSDoc. Haremos uno de los elementos de
+// nuestra lista de tareas pendientes (en inglés TODOs) basados en 
+// la estructura JSON:
+
+/**
+ * @typedef {Object} TODO un elemento de TODO
+ * @property {string} title El nombre a mostrar del elemento TODO
+ * @property {string} body La descripción del elemento TODO
+ * @property {boolean} done Si el elemento TODO ha sido o no completado
+ */
+
+// Ahora asígnalo al valor de retorno de JSON.parse.
+// Para más información, dirígete a: example:jsdoc-support
+
+/** @type {TODO[]} una lista de TODOs */
+const todoList = JSON.parse(todoListText);
+
+// Y manejo de procesos:
+import { spawnSync } from "child_process";
+todoList
+  .filter(todo => !todo.done)
+  .forEach(todo => {
+    // Usa el cliente ghi para crear una incidencia por cada
+    // elemento de la lista que no se ha completado aún.
+
+    // Observa que se activa correctamente el autocompletamiento
+    // y la documentación en JS cuando señalas debajo a 'todo.title'.
+    spawnSync(`ghi open --message "${todo.title}\n${todo.body}"`);
+  });
+
+// TypeScript tiene definiciones de tipos actualizadas para todos
+// los módulos incorporados por defecto, mediante DefinitelyTyped;
+// lo que significa que puedes escribir programas de node con una
+// sólida cobertura de tipos.
diff --git a/packages/playground-examples/copy/es/JavaScript/External APIs/TypeScript with Web.js b/packages/playground-examples/copy/es/JavaScript/External APIs/TypeScript with Web.js
new file mode 100644
index 000000000000..89e09c97c823
--- /dev/null
+++ b/packages/playground-examples/copy/es/JavaScript/External APIs/TypeScript with Web.js	
@@ -0,0 +1,80 @@
+//// { title: 'TypeScript con la Web', order: 0, isJavaScript: true }
+
+// El DOM (Document Object Model) es la API por detrás del
+// trabajo con una página web, y TypeScript tiene excelente
+// compatibilidad con esa API.
+
+// Creemos un globo de ayuda (en inglés, popover) que se muestra cuando 
+// se presiona "Ejecutar" en la barra de herramientas de arriba.
+
+const popover = document.createElement("div");
+popover.id = "example-popover";
+
+// Observa que el globo está correctamente anotado con el tipo
+// HTMLDivElement porque pasamos el elemento "div".
+
+// Para hacer posible volver a ejecutar este código, primero
+// añadiremos una función para eliminar el globo si ya existía.
+
+const removePopover = () => {
+  const existingPopover = document.getElementById(popover.id);
+  if (existingPopover && existingPopover.parentElement) {
+    existingPopover.parentElement.removeChild(existingPopover);
+  }
+};
+
+// Y entonces llamarla inmediatamente.
+
+removePopover();
+
+// Podemos establecer los estilos en línea del elemento a través
+// de la propiedad .style en un HTMLElement: tiene todos los tipos
+// definidos
+
+popover.style.backgroundColor = "#0078D4";
+popover.style.color = "white";
+popover.style.border = "1px solid black";
+popover.style.position = "fixed";
+popover.style.bottom = "10px";
+popover.style.right = "20px";
+popover.style.width = "200px";
+popover.style.height = "100px";
+popover.style.padding = "10px";
+
+// Incluidos atributos CSS menos conocidos u obsoletos.
+popover.style.webkitBorderRadius = "4px";
+
+// Para añadir contenido al globo, necesitaremos añadir
+// un elemento de párrafo y usarlo para añadir algún texto.
+
+const message = document.createElement("p");
+message.textContent = "Here is an example popover";
+
+// Y también añadiremos un botón de cerrar.
+
+const closeButton = document.createElement("a");
+closeButton.textContent = "X";
+closeButton.style.position = "absolute";
+closeButton.style.top = "3px";
+closeButton.style.right = "8px";
+closeButton.style.color = "white";
+
+closeButton.onclick = () => {
+  removePopover()
+}
+
+// Y entonces añadir todos estos elementos a la página.
+popover.appendChild(message);
+popover.appendChild(closeButton);
+document.body.appendChild(popover);
+
+// Si ejecutas "Run"  arriba, el popup debe aparecer
+// abajo a la izquierda, y lo puedes cerrar haciendo
+// click en la x en la parte superior derecha del popup.
+
+// Este ejemplo muestra cómo puedes trabajar con la API
+// del DOM en JavaScript, pero usando TypeScript para
+// obtener mejores herramientas de asistencia.
+
+// Hay un ejemplo extendido para las herramientas de TypeScript
+// con WebGL disponible aquí: example:typescript-with-webgl
diff --git a/packages/playground-examples/copy/es/JavaScript/Functions with JavaScript/Function Chaining.ts b/packages/playground-examples/copy/es/JavaScript/Functions with JavaScript/Function Chaining.ts
new file mode 100644
index 000000000000..a15a205a5588
--- /dev/null
+++ b/packages/playground-examples/copy/es/JavaScript/Functions with JavaScript/Function Chaining.ts	
@@ -0,0 +1,94 @@
+//// { title: 'Encadenamiento de funciones', order: 2, compiler: { esModuleInterop: true } }
+
+// Las APIs con funciones encadenadas son un patrón común en
+// JavaScript, lo que permite que tu código sea más conciso,
+// con menos valores intermedios y más fácil de leer debido 
+// a sus habilidades de anidamiento.
+
+// Una API muy común que funciona con encadenamiento
+// es jQuery. Aquí hay un ejemplo de jQuery
+// usada con tipos de DefinitelyTyped:
+
+import $ from "jquery";
+
+// Aquí hay un ejemplo de uso de la API de jQuery:
+
+$("#navigation")
+  .css("background", "red")
+  .height(300)
+  .fadeIn(200);
+
+// Si añades un punto en la línea de arriba, verás
+// una larga lista de funciones. Este patrón es fácil
+// de reproducir en JavaScript. La clave es asegurarse
+// de que siempre retornes el mismo objeto.
+
+// Aquí hay un ejemplo de API que crea una API con
+// encadenamiento. La clave es tener una función en
+// un nivel externo que mantenga información del estado
+// interno, y un objeto que exponga la API que se
+// devuelve siempre.
+
+const addTwoNumbers = (start = 1) => {
+  let n = start;
+
+  const api = {
+    // Implement each function in your API
+    add(inc: number = 1) {
+      n += inc;
+      return api;
+    },
+
+    print() {
+      console.log(n);
+      return api;
+    }
+  };
+  return api;
+};
+
+// Lo que permite el mismo estilo de API que
+// vimos en jQuery:
+
+addTwoNumbers(1)
+  .add(3)
+  .add()
+  .print()
+  .add(1);
+
+// Aquí hay un ejemplo similar que usa una clase:
+
+class AddNumbers {
+  private n: number;
+
+  constructor(start = 0) {
+    this.n = start;
+  }
+
+  public add(inc = 1) {
+    this.n = this.n + inc;
+    return this;
+  }
+
+  public print() {
+    console.log(this.n);
+    return this;
+  }
+}
+
+// Y aquí la vemos en acción:
+
+new AddNumbers(2)
+  .add(3)
+  .add()
+  .print()
+  .add(1);
+
+// Este ejemplo hace uso de la inferencia
+// de tipos de TypeScript como una forma
+// de proporcionar herramientas para patrones
+// de JavaScript.
+
+// Para más ejemplos sobre esto:
+//
+//  - example:code-flow
diff --git a/packages/playground-examples/copy/es/JavaScript/Functions with JavaScript/Generic Functions.ts b/packages/playground-examples/copy/es/JavaScript/Functions with JavaScript/Generic Functions.ts
new file mode 100644
index 000000000000..384f1e52a3e6
--- /dev/null
+++ b/packages/playground-examples/copy/es/JavaScript/Functions with JavaScript/Generic Functions.ts	
@@ -0,0 +1,103 @@
+//// { title: 'Funciones genéricas' }
+
+// La genericidad proporciona una forma de utilizar tipos
+// como variables en otros tipos. Meta.
+
+// Intentaremos mantener este ejemplo simple. Puedes hacer
+// muchas cosas con la genericidad y probablemente verás
+// en algún punto código muy complicado usando genericidad.
+// Pero eso no significa que la genericidad es complicada.
+
+// Comenzaremos con un ejemplo donde envolvemos un objeto de
+// entrada en un arreglo. Solo nos importará una variable en
+// este caso, el tipo suministrado:
+
+function wrapInArray<Type>(input: Type): Type[] {
+  return [input];
+}
+
+// Nota: es común ver el tipo Type como T. Esto es culturalmente
+// similar a como las personas usan i en un cliclo for para
+// representar index. T normalmente representa Type, por lo
+// que usaremos el nombre completo para mayor claridad.
+
+// Nuestra función usará inferencia para siempre mantener
+// el tipo suministrado como entrada igual al suministrado
+// como salida (aunque será envuelto en un arreglo).
+
+const stringArray = wrapInArray("hello generics");
+const numberArray = wrapInArray(123);
+
+// Podemos verificar que funciona como se espera comprobando
+// si podemos asignar un arreglo de cadenas a una función
+// que debe ser un arreglo de objetos.
+const notStringArray: string[] = wrapInArray({});
+
+// Además puedes saltarte la inferencia de tipos si añades
+// el tipo tú mismo:
+const stringArray2 = wrapInArray<string>("");
+
+// wrapInArray permite que se use cualquier tipo, sin embargo
+// hay casos en que necesitas permitir solo un subconjunto de
+// tipos. En estos casos puedes decir que el tipo tiene que
+// extender un tipo en particular.
+
+interface Drawable {
+  draw: () => void;
+}
+
+// Esta función toma un conjunto de objetos que tiene una función
+// para dibujar en la pantalla
+function renderToScreen<Type extends Drawable>(input: Type[]) {
+  input.forEach(i => i.draw());
+}
+
+const objectsWithDraw = [{ draw: () => { } }, { draw: () => { } }];
+renderToScreen(objectsWithDraw);
+
+// Fallará si falta draw:
+
+renderToScreen([{}, { draw: () => {} }]);
+
+// La genericidad puede comenzar a parecer complicada cuando tienes
+// múltiples variables. Aquí hay un ejemplo de una función de caché
+// que te permite tener diferentes conjuntos de tipos de entrada y
+// de cachés.
+
+interface CacheHost {
+  save: (a: any) => void;
+}
+
+function addObjectToCache<Type, Cache extends CacheHost>(obj: Type, cache: Cache): Cache {
+  cache.save(obj);
+  return cache;
+}
+
+// Esto es lo mismo que lo anterior, pero con un parámetro extra.
+// Nota: Sin embargo para que esto funcione debimos usar any.
+// Esto puede solucionarse usando una interfaz genérica.
+
+interface CacheHostGeneric<ContentType> {
+  save: (a: ContentType) => void;
+}
+
+// Ahora cuando se usa CacheHostGeneric, necesitas decirle
+// qué ContentType es.
+
+function addTypedObjectToCache<Type, Cache extends CacheHostGeneric<Type>>(obj: Type, cache: Cache): Cache {
+  cache.save(obj);
+  return cache;
+}
+
+// Eso escaló bastante rápido en términos de sintaxis. Sin
+// embargo provee más seguridad. Estas son decisiones que 
+// ahora tienes más conocimiento para hacer. Al proporcionar
+// APIs para terceros, la genericidad ofrece una forma flexible 
+// de permitir a otros utilizar sus propios tipos con total capacidad 
+// de inferencia de código.
+
+// Para más ejemplos de genericidad con clases e interfaces:
+//
+// example:advanced-classes
+// example:typescript-with-react
+// https://www.typescriptlang.org/docs/handbook/generics.html
diff --git a/packages/playground-examples/copy/es/JavaScript/JavaScript Essentials/Hello World.ts b/packages/playground-examples/copy/es/JavaScript/JavaScript Essentials/Hello World.ts
new file mode 100644
index 000000000000..ebe52dba6dc9
--- /dev/null
+++ b/packages/playground-examples/copy/es/JavaScript/JavaScript Essentials/Hello World.ts	
@@ -0,0 +1,35 @@
+//// { title: 'Hola Mundo', order: 0, compiler: { target: 1 } }
+
+// Bienvenido a TypeScript playground. Este sitio se parece
+// mucho a ejecutar un proyecto de TypeScript dentro de un
+// navegador.
+
+// El playground hace más fácil que puedas experimentar de forma
+// segura con ideas en TypeScript al hacer trivial compartir estos
+// proyectos. La URL de esta página es lo único que requiere
+// otra persona para cargar el proyecto.
+
+const hola = "Hola"
+
+// Puedes ver a la derecha el resultado del compilador
+// de TypeScript: esto es JavaScript puro, que puede ejecutarse
+// en navegadores, servidores o en cualquier lugar realmente.
+
+const mundo = "Mundo"
+
+// Puedes ver como hace pequeños cambios al código, al convertir
+// "const" a "var". Esta es una de las muchas cosas que TypeScript
+// hace para hacer posible su ejecución donde quiera que se
+// ejecute JavaScript.
+
+console.log(hola + " " + mundo)
+
+// Ahora que tienes una idea de como funciona el playground,
+// veamos como TypeScript hace que sea más divertido trabajar
+// con JavaScript. Durante esta sección intentaremos
+// mantenernos tan cercanos como sea posible a JavaScript puro
+// para mostrarte que puedes reutilizar conocimiento existente.
+//
+// Haz clic debajo para continuar:
+//
+// example:objects-and-arrays
diff --git a/packages/playground-examples/copy/es/JavaScript/JavaScript Essentials/Objects and Arrays.ts b/packages/playground-examples/copy/es/JavaScript/JavaScript Essentials/Objects and Arrays.ts
new file mode 100644
index 000000000000..ab5705bccb53
--- /dev/null
+++ b/packages/playground-examples/copy/es/JavaScript/JavaScript Essentials/Objects and Arrays.ts	
@@ -0,0 +1,114 @@
+//// { title: 'Objetos y arreglos', order: 1, compiler: { strict: false } }
+
+// Los objetos de JavaScript son colecciones de valores
+// asociados a un nombre (o clave).
+
+const userAccount = {
+  name: "Kieron",
+  id: 0
+}
+
+// Puedes combinarlos para crear modelos de datos más
+// grandes y complejos.
+
+const pie = {
+  type: "Apple"
+}
+
+const purchaseOrder = {
+  owner: userAccount,
+  item: pie
+}
+
+// Si utilizas tu mouse para pasarle por encima a estas
+// palabras (prueba con purchaseOrder arriba) puedes ver
+// como TypeScript está interprentando tu JavaScript como
+// tipos etiquetados.
+
+// Los valores pueden accederse con un ".", por lo que
+// para obtener un nombre de usuario de una orden de compra:
+console.log(purchaseOrder.item.type)
+
+// Si pasas tu mouse por encima de cada parte del código entre
+// los ()s, puedes ver que TypeScript ofrece más información
+// sobre cada parte. Intenta reescribir esto debajo:
+
+// Copia esto en la próxima línea, carácter por carácter:
+//
+//   purchaseOrder.item.type
+
+
+// TypeScript proporciona retroalimentación al playground
+// sobre qué objetos de JavaScript están disponibles en este
+// archivo y permite evitar errores tipográficos y ver
+// información adicional sin tener que buscarla en otro sitio.
+
+// TypeScript también ofrece estas mismas funcionalidades para
+// los arreglos. Aquí hay una arreglo con solo nuestra orden
+// de compra de arriba en él.
+
+const allOrders = [purchaseOrder]
+
+// Si pasas por encima de allOrders, puedes saber que es
+// un arreglo porque la información termina con []. Puedes
+// acceder a la primera orden usando los corchetes con un
+// índice (comenzando en cero).
+
+const firstOrder = allOrders[0]
+console.log(firstOrder.item.type)
+
+// Una forma alternativa de obtener un objeto es sacando
+// (con pop) los elementos del arreglo. Al hacerlo se
+// elimina el objeto del arreglo y se devuelve el objeto.
+// A esto se le llama mutar el arreglo, porque cambia los
+// datos subyacentes dentro de él.
+
+const poppedFirstOrder = allOrders.pop()
+
+// Ahora allOrders está vacío. Mutar los datos puede ser
+// útil para muchas cosas, pero una forma de reducir la
+// complejidad en tus bases de código es evitar la mutación.
+// TypeScript ofrece por otra parte una forma de declarar
+// un arreglo de solo lectura (readonly):
+
+// Crea un tipo basado en la forma de una orden de compra:
+type PurchaseOrder = typeof purchaseOrder
+
+// Crea un arreglo de solo lectura de órdenes de compra
+const readonlyOrders: readonly PurchaseOrder[] = [purchaseOrder]
+
+// ¡Sí! Es un poco más de código sin dudas. Hay cuatro
+// nuevas cosas aquí:
+//
+//  type PurchaseOrder - Declara un nuevo tipo de TypeScript.
+//
+//  typeof - Usa el sistema de inferencia de tipos para establecer
+//           el tipo con base en la constante que se pasa a continuación.
+//
+//  purchaseOrder - Obtiene la variable purchaseOrder y le dice
+//                  a TypeScript que esta es la forma de todos los
+//                  objetos en el arreglo orders.
+//
+//  readonly - Este objeto no permite mutación, una vez que
+//             se crea el contenido del arreglo será siempre
+//             el mismo.
+//
+// Ahora si intentas hacer pop de readonlyOrders, TypeScript
+// levantará un error.
+
+readonlyOrders.pop()
+
+// Puedes usar readonly en todo tipo de lugares, es un
+// poco más de sintaxis extra, pero proporciona mucha
+// seguridad adicional.
+
+// Puedes saber más sobre readonly:
+//  - [handbook link]
+//  - https://basarat.gitbooks.io/typescript/content/docs/types/readonly.html
+
+// y puedes continuar aprendiendo sobre JavaScript y
+// TypeScript en el ejemplo sobre funciones:
+// example:functions
+//
+// O si quieres saber más sobre inmutabilidad:
+// example:immutability