Building a simple text editor with iced, a cross-platform GUI library for Rust

แชร์
ฝัง
  • เผยแพร่เมื่อ 19 พ.ค. 2024
  • Learn the basics of iced-a cross-platform GUI library for Rust-and build a cool, simple text editor in the process!
    00:00:00 Introduction
    00:02:04 Initial setup
    00:03:59 Hello, iced!
    00:11:00 Multi-line text input
    00:15:53 The debug view
    00:17:46 Dark theme and cursor indicator
    00:21:14 Async file loading
    00:31:07 Native file picker
    00:38:04 File path tracking
    00:42:46 New and save interactions
    00:53:26 Font loading and custom icons
    01:02:22 Tooltips and styling
    01:05:01 Syntax highlighting
    01:09:12 Theme picker
    01:12:55 Subscriptions and save hotkey

ความคิดเห็น • 96

  • @4strodev
    @4strodev 7 หลายเดือนก่อน +129

    Man, if the docs have at least a little amount of content, this framework will become super popular

    • @Notoriousjunior374
      @Notoriousjunior374 6 หลายเดือนก่อน +2

      There are plenty of examples though and there are docs. The docs are just not beginners friendly, so stop being beginners.

    • @4strodev
      @4strodev 6 หลายเดือนก่อน +76

      @@Notoriousjunior374 Sorry I forgot to take the pill to be a senior rust developer...

    • @norliegh
      @norliegh 6 หลายเดือนก่อน +16

      ​​​​@@Notoriousjunior374 thanks for reminding me that i'm inferior

    • @foofighterdaz
      @foofighterdaz 5 หลายเดือนก่อน +8

      @@Notoriousjunior374 Ohh, just "git gud"

    • @timoxx8543
      @timoxx8543 4 หลายเดือนก่อน

      agree

  • @skytech2501
    @skytech2501 7 หลายเดือนก่อน +15

    I am already hooked. I love that it has "Update" and "View" as separate methods, creating excellent isolation of mutable & immutable blocks. modern frameworks combine them making it more complicated.

  • @yournamehasbeentaken9752
    @yournamehasbeentaken9752 6 หลายเดือนก่อน +12

    This was perfect thank you! I'm new to rust and was interested in building an editor as way to learn. I hope you do more. Also love Iced so far!

  • @pyroraptor07
    @pyroraptor07 7 หลายเดือนก่อน +2

    This is a really good tutorial of Iced! Thanks for doing this!

  • @redhawk3385
    @redhawk3385 7 หลายเดือนก่อน +2

    Can't wait for 0.12 to come out, these new features are really useful

  • @mariinkys
    @mariinkys 4 หลายเดือนก่อน

    Thank you so much for this video, I'm just starting with Rust, app development and Iced all at once and this video has been definitely very helpful! Hopefully more to come!

  • @joeybellerose8869
    @joeybellerose8869 4 หลายเดือนก่อน

    Great tutorial! As a Rust newbie, I would love to see more on custom styling. Thanks again for this exciting framework!

  • @cazdotsys
    @cazdotsys 7 หลายเดือนก่อน +1

    Absolutely love this!

  • @krabat6117
    @krabat6117 3 หลายเดือนก่อน +1

    Awesome, will be using your framework from now on. Looking forward to it! :)

  • @indierusty
    @indierusty 7 หลายเดือนก่อน +2

    This is incredible. Im beginner learning rust after C and Raylib and Iced looks great but couldn't find any tutorial.

  • @kommentlezz
    @kommentlezz 7 หลายเดือนก่อน +20

    The most informative introduction of any framework! Good luck with the project!🤩

    • @iced-rs
      @iced-rs  7 หลายเดือนก่อน +6

      And the most complete one!

    • @kommentlezz
      @kommentlezz 7 หลายเดือนก่อน +1

      @@iced-rs Yes! It feels like I've learned much more than just the framework because you perfectly showed a really useful example!

  • @echoptic775
    @echoptic775 5 หลายเดือนก่อน +2

    Hector and ice goes well together

  • @mrmaymanalt
    @mrmaymanalt หลายเดือนก่อน +1

    I just wanna say, excellent tutorial! Everything was very clear and easy to understand, and I made my first iced app with this. Thanks for the hard work!

  • @starlordcodes
    @starlordcodes 5 หลายเดือนก่อน +1

    Really had fun learning with your video, with the amount of things I have learned, I am going to try to make something myself. Looking forward to more such tutorials

  • @hagimo_dev
    @hagimo_dev 7 หลายเดือนก่อน

    Thank you for the awesome work 🙏

  • @el_carbonara
    @el_carbonara 7 หลายเดือนก่อน

    love the tutorial. just the level of detail I need to get started

  • @brucebotes9075
    @brucebotes9075 3 หลายเดือนก่อน

    Thank you for this great demo!

  • @tracer4278
    @tracer4278 4 หลายเดือนก่อน +1

    Please make documentation, we are all very much waiting, and it would be very cool if once a week would be released some tutorial on the example of a small project, thank you very much!👍👍👍

  • @yds6268
    @yds6268 6 หลายเดือนก่อน +1

    Didn't even know you guys had a channel, nice

  • @swez4587
    @swez4587 4 หลายเดือนก่อน

    Fantastic tutorial! I learned a lot. Thanks!

  • @avsaase
    @avsaase 7 หลายเดือนก่อน +3

    This is great! More video like this would be very welcome. If I may suggest a topic, advanced use of subscriptions would be good to have more material on.

    • @Dworv
      @Dworv 4 หลายเดือนก่อน

      seconding this

  • @henrispriet9812
    @henrispriet9812 10 วันที่ผ่านมา

    You make it look so easy

  •  6 หลายเดือนก่อน

    Thanks for this!

  • @undefined_x00
    @undefined_x00 5 หลายเดือนก่อน

    Amazing work!

  • @xbz24
    @xbz24 6 หลายเดือนก่อน

    thank you hector

  • @workflowinmind
    @workflowinmind 3 หลายเดือนก่อน

    I'm hooked!

  • @FabianVilersBe
    @FabianVilersBe 4 หลายเดือนก่อน

    Great content and very didactic to help me chose iced over egui.

  • @thebashpotato
    @thebashpotato 2 หลายเดือนก่อน

    I've devoted about a year to egui, and at work we use Tauri for alot our applications (mostly because we wanted to reuse React code). But damn, Iced is clean, if that documentation was even somewhat existent, this would absolutely take off.

  • @hanamjaa
    @hanamjaa 6 หลายเดือนก่อน +1

    I LOVE IT

  • @steamedeggeggegg
    @steamedeggeggegg 7 หลายเดือนก่อน +1

    Hope that the text editor widget can be launched on stablized versions

  • @th3oth3rjak3_
    @th3oth3rjak3_ 7 หลายเดือนก่อน +1

    This is an awesome video and I'm really excited about using Iced in some personal projects. I noticed that the editor doesn't respond to the tab keypress to indent in the editor. I went poking around a little bit to see if I could figure out why not, but got a little lost inside source. Any insights on the tab key? One minor comment for future videos,, you type quite fast and slowing down just a little bit would help those coding along so we don't have to keep pausing the video. :)

    • @iced-rs
      @iced-rs  7 หลายเดือนก่อน +4

      This would need to be implemented by the user, since this use case is specific to code editing and the text editor widget is meant to be relatively use-case agnostic.

    • @th3oth3rjak3_
      @th3oth3rjak3_ 7 หลายเดือนก่อน +1

      @@iced-rs That makes sense, thanks!

  • @joshuajones2643
    @joshuajones2643 5 หลายเดือนก่อน

    What are some good resources i could look into for using WASM to get this to run online? I'm trying to make a little editor for my org files

  • @PragandSens
    @PragandSens 7 หลายเดือนก่อน

    ahhh yes, the most complete ui-framework

  • @akza0729
    @akza0729 5 หลายเดือนก่อน

    If suppose someone made notes while learning and shared. Would that help later on with docs? Just asking.

  • @Kfoo-dj4md
    @Kfoo-dj4md 6 หลายเดือนก่อน

    Nice video! How did you get a terminal inside helix btw :)

    • @iced-rs
      @iced-rs  6 หลายเดือนก่อน +2

      It's a floating pane of my terminal multiplexer, Zellij: zellij.dev/ Also built with Rust!

    • @Kfoo-dj4md
      @Kfoo-dj4md 6 หลายเดือนก่อน

      @@iced-rs :0 thank you!

  • @fabiozucconi7068
    @fabiozucconi7068 2 หลายเดือนก่อน

    the debug feature prints number all over the window... is there a bug?
    Love you work!

  • @pijusmagnificus6382
    @pijusmagnificus6382 7 หลายเดือนก่อน

    Hi! Great video. How do you execute cargo run? How do you configure Zellij?

    • @iced-rs
      @iced-rs  7 หลายเดือนก่อน +2

      This is my Zellij layout for working on Rust projects: gist.github.com/hecrj/cf1a60529afd070b6de993fa5d76b9fc

    • @pijusmagnificus6382
      @pijusmagnificus6382 7 หลายเดือนก่อน

      @@iced-rs Thanks

  • @letronix6243
    @letronix6243 7 หลายเดือนก่อน

    I love you.

  • @DylanMatthewTurner
    @DylanMatthewTurner หลายเดือนก่อน

    How could I implement line numbering?
    I've tried a few things, but the issue is I can't clone/modify a Content arbitrarily or track things like scroll effectively. It also doesn't seem like it's possible built-in.
    I tried cloning iced and modifying the editor to add a ".numbered()" function, but even then I couldn't figure it out as the rendering code was too complicated for me to understand.

  • @user-bm6mo3xo4i
    @user-bm6mo3xo4i 7 หลายเดือนก่อน

    im having problems in the display of the font icons, for some reason it shows a rectangular icon instead of the one that should be placed. i downloaded the font placing the one i choose and placed the ttf file in the fonts folder, but still i get no icon. any ideas?

    • @iced-rs
      @iced-rs  7 หลายเดือนก่อน

      Make sure you are using the name you chose before downloading the font everywhere! Also, double-check the codepoints; they may be different for you.

    • @user-bm6mo3xo4i
      @user-bm6mo3xo4i 7 หลายเดือนก่อน

      @@iced-rs i fixed it by replacing a letter code of the utf with the icon code in the website

  • @parallelno
    @parallelno 3 หลายเดือนก่อน

    Does it support docking?

  • @DiscoveringComputers
    @DiscoveringComputers 5 หลายเดือนก่อน

    Please make more tutorials

  • @EDToasty
    @EDToasty 5 หลายเดือนก่อน +1

    How did you have a pop up terminal at 3:30? Is that through helix or zellij?

    • @qtfimik42
      @qtfimik42 4 หลายเดือนก่อน

      i wondered the same... i think it's via zellij: ctrl+p w

    • @sanjeevshrestha5049
      @sanjeevshrestha5049 2 หลายเดือนก่อน

      @@qtfimik42ctrl+shift+c, You can set default terminal from settings

  • @swordelf4689
    @swordelf4689 หลายเดือนก่อน

    Great video! I'm in love with this font, what's its name?

    • @iced-rs
      @iced-rs  หลายเดือนก่อน

      The one I use in my terminal is called Hasklig, although I use the Nerd Font variant: Hasklug Nerd Font.

  • @TheD3adlysin
    @TheD3adlysin 4 หลายเดือนก่อน

    Alright fellas load_file keeps throwing this error "functions in traits cannot be declared `async`" anyone seen a resolution for this problem?

  • @niamotullah99
    @niamotullah99 3 หลายเดือนก่อน

    I'm tryna learn this as beginner. But docs aren't ready. I'm just looking at the examples and here and there. Which works kinda but slow. Docs with some projects around would be great

    • @iced-rs
      @iced-rs  3 หลายเดือนก่อน +1

      Indeed. The project isn't ready for beginners yet! Docs (and more) are coming.

    • @Vancha112
      @Vancha112 25 วันที่ผ่านมา

      Hows the progress coming along? :)

  • @hawke1133
    @hawke1133 5 หลายเดือนก่อน

    Question. Where did the "text_editor" vanish too? Checked the crate code and it is no longer there. Version 0.10.0 Can't find it on version 0.9.0 either.

    • @iced-rs
      @iced-rs  5 หลายเดือนก่อน

      As I point out in the video, the text editor widget hasn't been released yet. You can either use it by relying on the `master` branch or the `text-editor` tag of the official repository.

    • @hawke1133
      @hawke1133 5 หลายเดือนก่อน

      @@iced-rs My bad. I misread the code. Derp! Thought that the "text_input" was a widget in the Iced crate. Sorry.

  • @mehrnehmen
    @mehrnehmen 7 หลายเดือนก่อน

    Thanks for that. Please do a video about multi screen applications. Maybe enhance the text editor with a markdown preview dialog or something.
    Also the fonts field is not available in iced stable or master branch. How to use icon buttons using stable iced version?
    EDIT: Got it: font::load(include_bytes!("path/to/icons.ttf").as_slice())

    • @iced-rs
      @iced-rs  7 หลายเดือนก่อน +1

      Multi-window support hasn't landed yet, but it is scheduled for the next release!

    • @mehrnehmen
      @mehrnehmen 7 หลายเดือนก่อน

      I know. I meant multi screen. Different screens in one window.

  • @Dragon20C
    @Dragon20C 7 หลายเดือนก่อน +1

    im getting this compile error.
    `palette` is ambiguous
    ambiguous because of multiple potential import sources
    use `::palette` to refer to this crate unambiguously
    use `self::palette` to refer to this module unambiguously
    Fixed: with this replacement: use crate::theme::palette::Palette; instead of what it was before which I think was pub use palette::Palette

    • @iced-rs
      @iced-rs  7 หลายเดือนก่อน +3

      Update your Rust toolchain and the issue should be fixed! Try `rustup update`.

    • @Dragon20C
      @Dragon20C 7 หลายเดือนก่อน

      I see, thanks!@@iced-rs

    • @Dragon20C
      @Dragon20C 7 หลายเดือนก่อน

      hay man sorry to bother you again im at the stage of adding the async bit into the code so when I run the code it complains about thread '' panicked at 'requires the `rt` Tokio feature flag' the funny thing is I am using the exact version as the one you typed in the tutorial, its asking me to put rt in the features section, which I do and then it complains about reactor not running with this error: thread '' panicked at 'there is no reactor running, must be called from the context of a Tokio 1.x runtime' so what is happening I followed the tutorial up to this point exactly and I cant progress because of this.@@iced-rs

    • @iced-rs
      @iced-rs  7 หลายเดือนก่อน

      @@Dragon20C Try running `cargo update`. If that doesn't work, try enabling the `tokio` feature for the `iced` dependency. I forgot to include that part in the video; I updated the tag yesterday so that it's no longer necessary to enable it manually.

    • @Dragon20C
      @Dragon20C 7 หลายเดือนก่อน

      alright it works now, I think you should make a pinned comment about this so other users dont get confused or experience this issue.@@iced-rs

  • @frostedson9317
    @frostedson9317 2 หลายเดือนก่อน

    WE RECIEVE IT fOR UGANDA TOO

  • @Ryco117
    @Ryco117 2 หลายเดือนก่อน

    It might be useful to mention that the code shown already creates a minimize, maximize and close button on most platforms.. it is just that the presenter chose to use a windowing system with their OS which doesn't show those items 😂

  • @frankstrea2786
    @frankstrea2786 6 หลายเดือนก่อน

    What linux is that

    • @iced-rs
      @iced-rs  5 หลายเดือนก่อน

      Arch Linux.

  • @lareamondmobile
    @lareamondmobile 3 หลายเดือนก่อน

    i want to like this project, i just can't because the docs are absolute trash. i have to watch a video to find that Sandbox is more suitable for "getting started" than Application, which the examples are in. hard pass.

    • @lareamondmobile
      @lareamondmobile 3 หลายเดือนก่อน

      i also want to note that being deaf and having to *watch* documentation is asinine because the automatic captions cover the text you're typing, AND they are awful on their own so... way to be accessible?

    • @iced-rs
      @iced-rs  3 หลายเดือนก่อน +7

      @@lareamondmobile Being deaf doesn't give you the right to be entitled and ungrateful. This library is a gift, and I want to remind you that you simply do not have to use it. No one is forcing you.
      In any case, if you are so annoyed by watching a video, maybe you could have digged a bit and realize that we actually have an API reference in docs.rs
      Here's Application: docs.rs/iced/latest/iced/application/trait.Application.html
      > An Application can execute asynchronous actions by returning a Command in some of its methods. If you do not intend to perform any background work in your program, the Sandbox trait offers a simplified interface.
      Here's Sandbox: docs.rs/iced/latest/iced/trait.Sandbox.html
      > A sandboxed Application. If you are a just getting started with the library, this trait offers a simpler interface than Application.
      We also have a Discord server were we gladly help new users: discord.gg/3xZJ65GAhd
      You will have to learn to be grateful first, though. Good luck with that!