Draco - A Wenyan-lang IDE

About Draco

Draco is an immersive IDE designed specifically for Wenyan-lang, a traditional Chinese programming language. Created by three friends from diverse cultural backgrounds—our goal was to embrace and celebrate this unique culture through code. Draco is also a proud Winner of NUS Hack and Roll 2025 Top 8 prize! 🏆

Features

Draco offers a fully immersive development environment with traditional Chinese aesthetics and functionality:

• 📝 Dedicated Wenyan-lang IDE – Write and execute Wenyan-lang code seamlessly.
• 🎨 Authentic Chinese UI – Experience a visually rich interface inspired by traditional Chinese calligraphy.
• 🈹 Top-down, right-to-left text flow – Emulating classical Chinese writing styles.
• ✨ Syntax highlighting – Dynamic and static syntax highlighting with Prism.js integration.
• 🌗 Light/Dark mode – Choose the theme that best suits your preference.
• 🎁 Easter Egg (Ctrl + A) – Try it and see what happens! 😉

How We Built It

We built Draco using Wenyan-lang itself, Javascript, HTML and CSS. Our goal was to blend traditional aesthetics with modern web development techniques.

Key technologies used:

• HTML, CSS (Tailwind), JavaScript (ES6+)
• Wenyan-lang for code execution
• Prism.js for syntax highlighting

Challenges We Faced

Creating Draco wasn't without its hurdles. Some of the key challenges we tackled include:

• Text Direction Handling: Adapting to top-down, right-to-left text orientation posed significant UI challenges, requiring custom solutions beyond existing libraries.
• Syntax Highlighting: Initially, we wanted to create our own solution but we managed hacky ways that work instead, tapping on Prism.js for efficiency.
• Cultural Exploration: Ensuring authenticity while making Draco user-friendly for a global audience.

What We Learned

Throughout this journey, we gained:

• A deeper understanding of engineering an app without relying on pre-built libraries and components.
• Insights into Wenyan-lang.
• Our first hackathon experience together!
• A stronger tolerance for an absence of sleep and staring at a screen for extended hours.

Installation and Usage

To get started with Draco:

1. Clone the repository:

   git clone https://github.com/your-username/draco.git
   

2. Navigate to the project directory:

  cd draco

3. Open index.html in your browser to start using the IDE.

Contributing

We welcome contributions! If you have suggestions or improvements, feel free to:

1. Fork the repository.
2. Create a feature branch (git checkout -b feature-name).
3. Commit your changes (git commit -m 'Add feature').
4. Push to the branch (git push origin feature-name).
5. Open a pull request.

Acknowledgments

A huge shout-out to:

• The Wenyan-lang community for their inspiring work in keeping traditional Chinese culture alive through code.
• Our friends and hackathon buddies for their support and a wholesome experience.
• NUS Hackers for the endless supply of Milo and choosing Draco for Hack and Roll 2025's Top 8 Projects. 😄

🔗 Check out Wenyan-lang: https://github.com/wenyan-lang/wenyan 🌏 Project Website: https://qilstiano.github.io/draco/