•  


Playground | MDN Plus

Playground

Write,Test and Share your code

What is the Playground?

The Playground is the new web development tool provided by MDN. It serves as a platform for web developers to preview and experiment with HTML, CSS, and JavaScript code. The Playground offers features like basic autocomplete, code formatting using the popular "prettier" tool, and the ability to share your work with others. By integrating the Playground into our web docs, MDN aims to provide an enhanced learning and coding experience for developers.

Key Features

The MDN Playground comes packed with several key features, including:

Preview: Instantly see the results of your HTML, CSS, and JavaScript code.

Autocomplete: Benefit from basic code suggestions and auto-completion to speed up your coding process.

Code Formatting: Utilize the powerful "prettier" tool to automatically format your code for better readability.

Sharing: Share your amazing work with others by publishing your code and sharing the generated link.

Integration within MDN: Seamlessly access the Playground within MDN, enabling a comprehensive learning experience.

How to Access the MDN Playground

Accessing the MDN Playground is quick and easy. Follow these steps to start using the Playground:

  1. There are two ways to access the playground: a. directly from the MDN menu by clicking on “Play” b. by accessing any MDN documentation page including code samples and clicking on the playground icon within the code samples Screenshot of top menu with play highlighted Screenshot of a code example with play highlighted
  2. Clicking the "Playground" button will launch the Playground in a new tab.
  3. Start coding, previewing, and experimenting with HTML, CSS, and JavaScript right away! Screenshot of the playground

Join the Community

The MDN Playground is not just a tool; it's a community of passionate developers eager to learn and collaborate. We encourage you to join the MDN Playground community and become part of this vibrant ecosystem. Here's how you can get involved:

Sign up for an MDN Plus account if you haven't already.

  1. Participate in discussions, share ideas, and seek help on Discord .
  2. Contribute to the improvement of the Playground by reporting issues or suggesting new features .
  3. Showcase your projects, share your knowledge, and inspire others by contributing code examples to MDN.

Under the Hood

Curious about how the Playground works? Visit our blog and read more about the technical details, architecture, and design choices we made to build it.

- "漢字路" 한글한자자동변환 서비스는 교육부 고전문헌국역지원사업의 지원으로 구축되었습니다.
- "漢字路" 한글한자자동변환 서비스는 전통문화연구회 "울산대학교한국어처리연구실 옥철영(IT융합전공)교수팀"에서 개발한 한글한자자동변환기를 바탕하여 지속적으로 공동 연구 개발하고 있는 서비스입니다.
- 현재 고유명사(인명, 지명등)을 비롯한 여러 변환오류가 있으며 이를 해결하고자 많은 연구 개발을 진행하고자 하고 있습니다. 이를 인지하시고 다른 곳에서 인용시 한자 변환 결과를 한번 더 검토하시고 사용해 주시기 바랍니다.
- 변환오류 및 건의,문의사항은 juntong@juntong.or.kr로 메일로 보내주시면 감사하겠습니다. .
Copyright ⓒ 2020 By '전통문화연구회(傳統文化硏究會)' All Rights reserved.
 한국   대만   중국   일본