GreenLight เปลี่ยน VS Code ให้กลายเป็น Visual Builder

ถ้าพูดถึง VS Code หลายคนคงนึกภาพหน้าจอสีดำเต็มไปด้วยตัวอักษรสีต่าง ๆ ซึ่งก็ถูกต้อง แต่มีเครื่องมือตัวหนึ่งที่กำลังเปลี่ยนภาพนั้นไปอย่างน่าสนใจ นั่นคือ GreenLight Extension สำหรับ VS Code ที่เปลี่ยน Editor เขียน code ธรรมดาให้กลายเป็น Visual page builder ได้เลย โดยไม่ต้องออกจาก IDE

ถ้าคุณเคยรู้สึกว่าการเขียน HTML หรือ Markdown มันช้าไป ต้องพิมพ์โค้ด เปิด preview สลับไปมา GreenLight คือเครื่องมือที่พยายามแก้ pain point ตรงนี้โดยตรง มันทำให้การเขียนหน้าเว็บหรือเอกสารกลายเป็นประสบการณ์แบบ visual มากขึ้น เหมือนใช้ page builder แต่ยังควบคุมได้แบบนักพัฒนา

GreenLight คืออะไร?

GreenLight เป็น Page Builder Plugin สำหรับ WordPress ที่พัฒนาต่อยอดมาจาก GreenShift ซึ่งเป็น WordPress plugin ชื่อดังสำหรับสร้าง Gutenberg blocks แบบ advanced GreenShift/GreenLight ในฝั่ง WordPress นั้นมีมาก่อน แล้วทีมพัฒนาจึงขยาย ecosystem มาทำ VS Code Extension เพิ่มเติม เพื่อให้นักพัฒนาสามารถสร้างและแก้ไข HTML/Markdown ด้วย visual editor แบบเดียวกันได้โดยตรงใน IDE

GreenLight Visual HTML, Astro, and Markdown Editor

GreenLight คือ Extension ที่ให้คุณเปิดไฟล์ .html, .astro, .md และ .mdx แบบ visual editor ได้ภายใน VS Code หรือ IDE ที่ based on VS Code ทุกตัว ไม่ว่าจะเป็น Cursor, WindSurf หรือ Cline แทนที่จะจ้องอ่านโค้ดแล้วจินตนาการว่าหน้าเว็บจะออกมาหน้าตาแบบไหน คุณสามารถคลิกเลือก element บน canvas แก้ไขได้เลย แล้วโค้ดใน source file จะถูกอัปเดตให้อัตโนมัติ ไม่มีขั้นตอน export หรือ copy-paste ยุ่งยาก

GreenLight VS Code Extension ถูกออกแบบให้ทำงานร่วมกับ WordPress ได้โดยตรง ฟีเจอร์ export สามารถแปลง HTML ที่สร้างใน VS Code ไปเป็น GreenShift/GreenLight WordPress block code ได้เลย และยัง connect กับ WordPress site จริงผ่าน Application Password เพื่อ create/update page ได้ด้วย แนวคิดคือให้ designer หรือ developer สร้าง layout ใน VS Code แล้ว push ขึ้น WordPress ได้โดยไม่ต้องเปิด browser หรือ WordPress admin เลย

ทำอะไรได้บ้าง

ฟีเจอร์หัวใจของ GreenLight คือ Canvas editing ที่ให้คุณคลิกเลือก element แล้วปรับแต่งได้ทันทีครับ ทั้ง typography, สี, spacing, border, shadow, transform และ effects ต่างๆ ผ่าน panel ด้านขวา โดยไม่ต้องพิมพ์ CSS ให้ปวดหัว Layout ก็ครอบคลุมทั้ง Flexbox และ Grid พร้อม visual grid builder สำหรับสร้าง layout แบบ responsive

​เรื่อง responsive ก็ไม่ตกหล่น มีโหมด Desktop, Tablet และ Mobile ให้สลับ แต่ละ breakpoint เก็บ style overrides ของตัวเองแยกกัน ทำให้ปรับแต่งสำหรับแต่ละขนาดหน้าจอได้อย่างเป็นอิสระ

Animation Builder พร้อมใช้งาน

หนึ่งในฟีเจอร์ที่น่าประทับใจคือ Animation builder ในตัว ซึ่งมากกว่าแค่เปิด-ปิด transition ธรรมดา คุณสามารถสร้าง reusable animation class ได้ เลือก preset สำเร็จรูปอย่าง fade, slide, grow, spin, pulse, bounce หรือจะแต่ง keyframes เองก็ได้ ตั้งค่า trigger ได้ว่าจะ fire ตอน load, hover, in-view หรือ scroll และปรับ duration, easing, delay ได้ตามต้องการครับ

Markdown เต็มรูปแบบ

สำหรับคนที่ใช้ Markdown เป็นหลัก GreenLight มี Toolbar ให้จัดรูปแบบข้อความได้ครบ ทั้ง bold, italic, heading H1-H6, lists, tables, blockquotes, code blocks, links และ images ที่สำคัญคือโค้ดต้นฉบับ Markdown ยังอยู่ครบถ้วน ไม่มีการ convert หรือทำลายฟอร์แมตเดิม

Export ไป WordPress ได้

นี่คงเป็นฟีเจอร์ที่คนใช้ WordPress จะสนใจมากที่สุด GreenLight สามารถ export HTML ที่สร้างไว้ไปเป็น GreenShift/GreenLight WordPress block code ได้โดยตรง ไม่ใช่แค่ copy โค้ดเฉยๆ แต่ connect กับ WordPress site จริงได้เลย โดยใช้ WordPress Application Password และ GreenShift plugin endpoint ระบบยังสามารถ upload media, sync CSS variables เป็น GreenShift global variables และ create/update หน้าเพจบน WordPress ได้อีกด้วยครับ

ราคา

GreenLight มีให้ใช้ฟรีสำหรับฟีเจอร์หลักทั้งหมด ครอบคลุมตั้งแต่ visual editing, design panels, responsive, drag-and-drop และ animation builder โดยไม่มีค่าใช้จ่าย ถ้าอยากได้ฟีเจอร์เพิ่มอย่าง wireframe/template library, design system, CSS variable management และ WordPress export แบบเต็มรูปแบบ มี Pro Plan ราคาเริ่มต้น $39 ต่อปี (ประมาณ 1,280 บาท) หรือ แบบ Lifetime จ่ายครั้งเดียวใช้งานได้ตลอดอายุการใช้งาน ราคา $129 (ประมาณ 4,230 บาท) แต่ถ้าเพื่อน ๆ ที่เคยซื้อ GreenLight PRO หรือ GreenShift AIO อยู่แล้ว สามารถนำโค้ดพิเศษไปวางในหน้าชำระเงินเพื่อรับ License Key ฟรีได้เลย

เริ่มใช้งานยังไง

ขั้นตอนไม่ซับซ้อน ติดตั้ง Extension จาก VS Code Marketplace ให้เสร็จก่อน จากนั้นคลิกขวาที่ไฟล์ .html, .astro, .md หรือ .mdx แล้วเลือก “Open with GreenLight Visual Editor” ต้องการ VS Code เวอร์ชัน 1.85.0 ขึ้นไป และไฟล์ที่จะแก้ต้องเป็นไฟล์ local ในเครื่อง และยังไม่รองรับ remote file หรือ file type อื่นๆ นอกเหนือจากที่กล่าวมาครับ

​

สรุป

GreenLight เหมาะกับคนที่อยากมี Visual tools แต่ไม่อยากทิ้ง VS Code ไปไหน เหมาะมากสำหรับการสร้าง landing page เร็ว ๆ ทดลอง layout CSS, prototype animation, หรือแก้ Markdown ให้ดูดีโดยไม่เสียอารมณ์ coding ถ้าคุณเบื่อการ tweak CSS แบบ blind หรืออยากเห็น animation ทันทีโดยไม่เปิด devtools ลองโหลดมาทดสอบดูครับ มันอาจกลายเป็นเครื่องมือที่คุณเปิดใช้บ่อยโดยไม่รู้ตัว

รายละเอียดเพิ่มเติม