Drag & Drop components here
or click elements in the left sidebar to compose your page
No-Code Web Designer
Drag & Drop components here
or click elements in the left sidebar to compose your page
สร้าง REST API, Supabase Auth, Row Level Security และหน้าเว็บจาก Canvas
.env.example เปล่า และไม่บันทึกค่าที่กรอกลงโปรเจกต์ที่ดาวน์โหลด
แต่ละตารางจะสร้าง REST CRUD routes พร้อม owner-only RLS; ระบุบทบาท trusted app_metadata เพื่อจำกัด table/API และสร้าง RLS policy ที่ตรงกัน เช่น {"tasks":["admin","editor"]}. Role claims ต้องกำหนดผ่าน trusted Supabase admin เท่านั้น
อธิบายเครื่องมือทั้งหมดและขั้นตอนทำเว็บ ตั้งแต่หน้าเปล่าจนถึง Full-stack Go + Supabase
ไม่พบหัวข้อที่ค้นหา ลองใช้คำสั้น ๆ เช่น “API” หรือ “ตาราง”
เคล็ดลับ: ถ้าต้องการวางชิ้นงานไว้ข้างใน Card/Container ให้ลากไปปล่อยในกล่องนั้น แล้วเปิด Layer Tree เพื่อตรวจว่ามันเป็นลูกของกล่องหรือไม่
Layout: Container, 2-Col Grid, 3-Col Grid, Flex Row, Spacer และ Card ใช้จัดโครงหน้าและวางส่วนประกอบไว้เป็นกลุ่ม
Page Sections: Hero Section, Feature Grid, Testimonial, Pricing Table, Call to Action, FAQ Section และ Contact Section เป็นส่วนสำเร็จรูปสำหรับ Landing page
Structure: Header, Navbar, Main, Section, Article, Sidebar, Footer, Search Region, Address และ Time ช่วยกำหนดความหมายและโครงสร้าง HTML
Text & Content: Heading/H1–H6, Paragraph, Link, Quote, Divider, List/Ordered List/List Item/Definition List, Data Value, Table; การเน้นข้อความ (Strong, Emphasis, Bold, Italic, Underline, Strikethrough, Small, Mark, Deleted, Inserted, Subscript, Superscript); inline text (Span, Abbreviation, Inline Quote, Citation, Definition, Ruby, Bidi Isolate/Override); และ Code, Preformatted, Keyboard, Variable, Sample Output
Forms: Input, Textarea, Select, Checkbox, Radio, Option Group, Label, Datalist, Form และ Fieldset ใช้ประกอบแบบฟอร์ม; การรับ/บันทึกข้อมูลจริงต้องผูก API
Media: Image, Figure, Picture, Image Map, Video, Video Source, Audio, Iframe, Map และ Canvas ใช้แสดงสื่อและเนื้อหาฝัง
Interactive: Accordion, Counter, Button, Button Element, Menu, Dialog, Output, Progress และ Meter ใช้ทำส่วนโต้ตอบ/แสดงสถานะ
More HTML Tags: Line Break, Word Break และ Slot; ส่วน Custom / Web Component ในหมวดนี้ใช้เพิ่ม tag ตามต้องการ
Web App: App Shell, Stats Cards, App Page/Route (ปุ่ม New App Page), Data Table, Data Chart, Tabs, Validated Form, Login/Register, Profile & Password, Private File Upload, Role-gated Section, Settings Form, Activity Feed และ Empty State สำหรับหน้าตาเว็บแอป
Backend: CRUD API/Database ตั้ง schema, Connect API ตั้ง endpoint ให้ element, CRUD Dashboard สร้างหน้าจัดการข้อมูล, Login/Register เพิ่มหน้าล็อกอิน, Auth + RLS ตั้งค่าการยืนยันตัวตนและ row-level security และ Go Project ZIP สร้างโปรเจกต์ Full-stack
hero-title highlightappState.get(key, initialValue), appState.set(key, value), appState.remove(key) และ appState.clear(); ส่ง route เป็นอาร์กิวเมนต์ตัวท้ายได้ เช่น appState.set('count', 3, '/projects')สถานะที่บันทึกด้วยวิธีนี้อยู่ใน localStorage ของ browser เครื่องนี้ ไม่ได้ sync ไป backend หรือเครื่องอื่น และไม่ควรใช้เก็บรหัสผ่าน, token หรือข้อมูลลับ
CSS ที่เพิ่มผ่าน Inspector จะถูกนำไปสร้างในโค้ด export โดย class สำเร็จรูปใน Canvas อาศัย Tailwind CSS และไอคอนบางส่วนอาศัย Font Awesome CDN
{"tasks":{"title":"text","completed":"boolean"}}text, integer, numeric, boolean, date, timestamptz. ระบบเพิ่ม id, user_id และ created_at ให้อัตโนมัติ{"tasks":["admin","editor"]}. Role ต้องมาจาก trusted app_metadata; ระบบสร้างทั้ง Go API check และ RLS policydatabase/schema.sql ใน Supabase, คัดลอก .env.example เป็น .env, ใส่ URL/key แล้วสั่ง go mod tidy และ go run .http://localhost:8080; สร้าง Login/Register และ CRUD Dashboard ใน Canvas แล้วกดดาวน์โหลด ZIP ใหม่หลังแก้หน้าเว็บ/openapi.json และรัน tests ได้ด้วย go test ./...ต้องตั้งค่า Supabase จริงก่อน Auth, CRUD และ Storage จะใช้งานได้; การวาง component ใน Editor อย่างเดียวไม่ได้สร้างฐานข้อมูลหรือบันทึกข้อมูลจริง และ role-gated UI เพียงอย่างเดียวไม่ใช่ระบบรักษาความปลอดภัย
app_metadata.role หรือ app_metadata.roles และต้องตรงกับ role ที่ตั้งให้ resource