เครื่องมือ HTML
ทำงานกับ HTML, Pug, JSX, คอมโพเนนต์ SVG และ CSS แปลงมาร์กอัปและสไตล์สำหรับงานพัฒนาครั้งต่อไป
มี 21 เครื่องมือในหมวดหมู่นี้ ทุกเครื่องมือทำงานในเบราว์เซอร์และไม่ต้องสมัครสมาชิก
เครื่องมือแก้ไขเส้นทาง SVG
ปรับรูปทรงของเส้นทาง SVG ได้โดยตรง เลื่อนจุดยึดและจุดควบคุมเส้นโค้ง แล้วคัดลอกเส้นทางหรือบันทึก SVG
เครื่องมือปรับ SVG ให้เหมาะสม
ปรับ SVG แบบคงที่ให้เหมาะสมในเครื่องด้วย SVGO เปรียบเทียบผลลัพธ์และดาวน์โหลดแยกไฟล์หรือเป็น ZIP
แปลงไฟล์ SVG เป็น JSX ได้ง่ายๆ
แปลงไฟล์ SVG เป็นโค้ด React JSX ได้อย่างมีประสิทธิภาพ ช่วยให้การพัฒนาเว็บแอปพลิเคชันที่มีเนื้อหาแบบไดนามิกและโต้ตอบกับผู้ใช้ได้สะดวกขึ้น
แปลง SVG สำหรับแอป React Native
ใช้ความสามารถของ React Native ด้วยเครื่องมือแปลงไฟล์ SVG เป็นคอมโพเนนต์ React Native สำหรับพัฒนาแอปมือถือข้ามแพลตฟอร์ม
เครื่องมือแปลง HTML เป็น React JSX
แปลงโค้ด HTML เป็นรูปแบบ React JSX เพื่อนำกลับมาใช้และแยกเป็นคอมโพเนนต์ในโปรเจกต์ React ช่วยเพิ่มประสิทธิภาพการพัฒนาและคุณภาพโค้ด
แปลง HTML เป็น Pug ออนไลน์
แปลง HTML เป็นเทมเพลต Pug (Jade) ออนไลน์ เลือกโหมดเฉพาะส่วนหรือทั้งเอกสาร แท็บ จุลภาคคั่นแอตทริบิวต์ และรูปแบบเครื่องหมายคำพูด พร้อมลองตัวอย่างฟอร์มและเอกสาร
แปลง Markdown เป็น HTML
แปลงไฟล์ Markdown เป็น HTML เพื่อแสดงข้อความที่จัดรูปแบบไว้บนหน้าเว็บ
เครื่องมือสร้าง Flexbox
จัดเลย์เอาต์ flex ที่ใช้งานจริง ปรับคอนเทนเนอร์และแต่ละรายการ ทดลองความกว้างต่าง ๆ แล้วนำโค้ด CSS, HTML หรือ Tailwind ไปใช้
เครื่องมือสร้างเส้นทางตัด CSS
สร้างรูปทรงบนผืนผ้าใบได้โดยตรง ลากจุดของรูปหลายเหลี่ยม ทดลองรูปทรงโค้งมน แล้วส่งออก CSS หรือ SVG
เครื่องมือสร้างเงากล่อง
สร้างมิติทีละชั้น เลื่อนแสง ปรับความนุ่มและสี แล้วคัดลอกเงาที่พร้อมใช้งานจริง
เครื่องมือสร้าง CSS Grid
วาดเลย์เอาต์ CSS Grid แบบเห็นภาพ กำหนดขนาดคอลัมน์และแถว ลากผ่านเซลล์เพื่อตั้งชื่อพื้นที่ แล้วคัดลอกโค้ด CSS, HTML หรือ Tailwind
เครื่องมือสร้าง Cubic Bezier
ปรับรูปเส้นโค้ง easing ของ CSS ด้วยการลากจุดจับสองจุด เปรียบเทียบการเคลื่อนไหวกับจังหวะแบบ linear แล้วคัดลอก cubic-bezier() ไปใช้กับ transition หรือ Tailwind
เครื่องมือสร้าง Border Radius
ปรับความโค้งของแต่ละมุม สลับเป็นรัศมีแบบวงรี และลากจุดจับที่ขอบเพื่อปั้นรูปทรง blob แล้วคัดลอก CSS border-radius หรือ Tailwind
เครื่องมือสร้าง Glassmorphism
สร้างแผงกระจกฝ้าด้วย backdrop-filter ปรับความเบลอ ความโปร่งใส ความอิ่มตัว และเส้นขอบบนพื้นหลังจริง แล้วคัดลอก CSS
CSS Gradient Generator
สร้าง CSS gradient แบบ linear, radial, conic ลากจุดสีได้ มีพรีเซ็ต คัดลอก CSS หรือคลาส Tailwind ฟรี
แปลง CSS เป็นออบเจ็กต์ JavaScript
แปลงไฟล์ CSS เป็นออบเจ็กต์ JavaScript เพื่อให้ใช้และปรับแต่งสไตล์ในโปรเจกต์ส่วนหน้าได้สะดวก
แปลงสไตล์แบบออบเจ็กต์เป็น Template Literals
แปลงสไตล์แบบออบเจ็กต์เป็น template literals เพื่อให้การใช้สไตล์ในเฟรมเวิร์กอย่าง React มีประสิทธิภาพยิ่งขึ้น
เครื่องมือแปลง CSS เป็น Tailwind
แปลง CSS เป็นคลาสยูทิลิตี Tailwind CSS ออนไลน์ วางกฎ CSS เพื่อรับคลาสที่ตรงกันในรูปแบบ @apply พร้อมตัวเลือกค่า rem พื้นฐานและการตั้งค่า (ใช้สเกล Tailwind v3)
คอมไพล์ Less เป็น CSS ออนไลน์
คอมไพล์ Less เป็น CSS ออนไลน์ด้วยคอมไพเลอร์ less.js อย่างเป็นทางการในเบราว์เซอร์ ขยายตัวแปร การซ้อน และ mixins พร้อมตัวเลือกเพิ่ม vendor prefixes โดยไม่ต้องติดตั้ง lessc
แปลง SCSS เป็น CSS มาตรฐาน
แปลงไฟล์พรีโพรเซสเซอร์ SCSS เป็น CSS มาตรฐาน เพื่อให้การเขียนและจัดการสไตล์ชีตง่ายขึ้น
แปลง Sass เป็น CSS มาตรฐาน
แปลงไฟล์พรีโพรเซสเซอร์ Sass เป็น CSS มาตรฐาน เพื่อให้สไตล์ชีตอ่านง่ายและนำกลับมาใช้ได้สะดวกขึ้น